CSS3(1)
一、选择器
1.关系选择器
(1)包含选择符:E F 选择E元素包含的所有F元素
(2)子选择符:E>F 选择所有作为E元素的子元素F
(3)相邻选择符:E+F 选择紧贴在E元素之后的F元素
(4)兄弟选择符:E~F 选择E元素所有兄弟元素F
2.伪类选择器
(1)结构性伪类选择器
E:root 匹配E元素在文档的根元素(一个页面的根元素是html)
E:first-child 匹配父元素的第一个子元素E
E:last-child 匹配父元素的最后一个子元素E
E:only-child 匹配父元素仅有的一个子元素E
E:nth-child(n) 匹配父元素的第n个子元素E,n还可为特殊值:公式(eg:(3n+1))/odd(奇数)/even(偶数)
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E
E:first-of-type 匹配同类型中的第一个同级兄弟元素E
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E
E:empty 匹配没有任何子元素的元素E
(2)UI元素状态伪类选择器
E:checked 选中项
E:enabled 可用项
E:disabled 禁用项
3.属性选择器
E[att] 选择具有att属性的E元素
E[att=”val”] 选择具有att属性且属性值=val的E元素
E[att~=”val”] 选择具有att属性且属性值为用空格分隔的字词列表,其中一个等于val的E元素
E[att^=”val”] 选择具有att属性且属性值为以val开头的字符串的E元素
E[att$=”val”] 选择具有att属性且属性值为以val结尾的字符串的E元素
E[att*=”val”] 选择具有att属性且属性值为包含val的字符串的E元素
E[att|=”val”] 选择具有att属性且属性值为以val开头并用连接符”-“分隔的字符串的E元素
4.伪对象选择器
E:first-letter/E::first-letter 设置对象内的第一个字符的样式
E:first-line/E::first-line 设置对象内的第一行的样式
E:before/E::before 设置在对象前发生的内容,用来和content属性一起使用
E:after/E::after 设置在对象后发生的内容,用来和content属性一起使用
E::selection 设置对象被选择时的背景色和字体颜色
二、属性
- 半透明:
opacity:0.5; 其他浏览器(针对父元素)
filter:opacity(50%); IE(针对父元素)
background:rgba(255,0,0,.5); 针对背景颜色的半透明
- 去掉表单元素的蓝色外边框:
input{
outline:none;
}
- 边框蓝线与边框的距离:(IE不兼容)
outline-offset:15px;
三、css属性
1.盒子阴影:box-shadow:h-shadow(水平偏移) v-shadow(垂直偏移) blur(模糊距离) spread(模糊半径) color(颜色) inset(内阴影,不加为外阴影)
其中水平偏移的值是右正左负,垂直偏移的值是下正上负。
- 要注意浏览器的兼容性,所以要写带多个前缀的box-shadow属性。前缀有:-webkit-,-ms-,-o-,-moz-。
优雅降级:先写总体,后写各个内核。
渐进增强:先写各个内核的,后写总体。
2.文字阴影:text-shadow:h-shadow v-shadow blur color;
3.边框图片:border-image:source(位置) slice(图像边界向内偏移的距离) width outset repeat ;
repeat:round; 平铺重复(可能会缩小图片,使其是完整的一个个)
stretch; 拉伸
repeat; 平铺重复(不会管图像是否完整,只是单纯的平铺在那)
要注意的是,如果想要显示出图片边框的样式,必须先定义border:solid xpx ;这样图片边框的样式才能显示出来。
4.(表单补充标签)列表组:
<fieldset>
<legend>市场调查</legend>
<p>姓名:<input type="text"/></p>
<p>性别:<input type="text"/></p>
<p>年龄:<input type="text"/></p>
<p>户籍:<input type="text"/></p>
<p>喜好:<input type="text"/></p>
</fieldset>
效果图:
5.圆角效果:
border-radius:a 四个圆角值相同
a b 左上和右下/右上和左下
a b c 左上/右上和左下/右下
a b c d 左上/右上/右下/左下
6.多背景:谁在最前面谁就在最上面,每一组背景间用逗号隔开。
background:url(1) repeat-x left bottom,
url(2) no-repeat center,
url(3) repeat;
- 设置背景图片大小:
background:url( ) no-repeat;
background-size:contain/cover/百分比/精确像素;
contain:以最小程度填满,即以长边填满;
cover:以最大程度放大,即短边填满区域;
百分比:100% 100%;
精确像素:50px 50px;
7.规定背景图片的定位区域:
background-origin:padding-box; 填充为起点(默认)
content-box; 文本内容为起点
border-box; 边框为起点
8.规定背景的绘制区域:
background:border-box;(默认)
content-box;
padding-box;
9.背景图片的状态:
background-attachment:scroll/local/fixed;
scroll:随着页面滚动条滚动;
local:随着当前内容文本(滚动元素)滚动;
fixed:固定位置;
10.overflow:scroll/hidden(溢出隐藏)/auto;【给div定宽高后用overflow】
11.渐变:
(1)线性渐变:background: linear-gradient(direction, color-stop1, color-stop2, …);
重复性渐变: background: repeating-linear-gradient(red 0%, yellow 15%, green 30%);
(2)径向渐变:background: radial-gradient(center, shape size, start-color, …, last-color);
- 默认是由中心向外渐变,均匀分布。
- 由中心点向外的颜色分布(颜色结点不均匀分布):(red 5%,green 15%,blue 60%);
- shape (形状):circle(圆)/ellispe(椭圆,默认值);
-
size (渐变的大小):
closest-side 按中心点离最近的边的距离分配 farthest-side 按中心点离最远的边的距离分配 closest-corner 按中心点离最近的角的距离分配 farthest-corner 按中心点离最远的角的距离分布(默认)
重复径向渐变:background: repeating-radial-gradient(red, yellow 10%, green 15%);
13.文本溢出:
text-overflow:clip(修剪文本,直接截断)/ellipsis(溢出用点代替)/string(用给定字符串代替);
white-space:nowrap; 禁止换行
overflow:hidden; 溢出隐藏
14.文本换行(英文):
word-break:normal; 使用浏览器默认换行
break-all; 允许在单词内换行
keep-all; 只能在半角空格或连字符处换行
15.字体定义与调用:
@font-face{
font-family:newfont;/*自定义字体名字*/
src:url(路径)
}
p{
font-size:30px;
}
p:first-of-type{
font:25px newfont;
}
16.多列:
p{
column-count:n;(n=1,2,3…) 分列(无单位)
column-gap:20px; 列间距
column-rule:solid 2px #f00; 间隔线
column-width:100px; 列宽
column:宽度 列数;
}
17.用户界面(改变窗口):
resize:none; 禁掉文本框textarea可拖拽的固有属性 。
- 把div变成文本框:
resize:horizontal(水平)/both(两边)/vertical(垂直);
overflow:auto;
resize必须和overflow一起使用才可使文本框变为可拖动。
18.box-sizing 属性
box-sizing:content-box/border-box;
使用此属性后,在一个元素的width和height中包含了padding和border。
19.响应式图片:
img{
width:100%;
height:auto;
max-width:100px; 随着网页缩放图片跟着缩小,定义了图片的最大宽度,且其和网页缩放无关,最大为原始图片大小。
min-width:300px; 将网页的宽缩放到300px时,图片刚好显示完整;再继续缩小,水平出现滚动条,图片放不下。
}
上一篇: css3 ---1 基本的选择器
下一篇: HTML视频播放
推荐阅读
-
欢迎来到扁平世界 Win10 19H1预览版18282体验
-
java软件工程师学php - 1. 动态数据类型
-
Alex的Hadoop菜鸟教程:第8课Sqoop1导入Hbase以及Hive
-
Codeforces Round #157 (Div. 1) C. Little Elephant and LCM (数学、dp)
-
Oracle性能究极优化 上第1/2页
-
C#基础知识1-深入理解值类型和引用类型
-
1.ASP.NET Core介绍
-
如果原先没有 HTML 和 CSS 的基础,可以直接学 HTML5 和 CSS3 吗?
-
学习笔记1 - 树懒的追求
-
ES6高级1:异步promise/async/await