CSS3（1）

最新推荐文章于 2024-04-17 21:07:38 发布

king--

最新推荐文章于 2024-04-17 21:07:38 发布

阅读量198

点赞数

分类专栏： web前端文章标签： css3

本文链接：https://blog.csdn.net/wenwen_king/article/details/78554190

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、选择器

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>

效果图：

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时，图片刚好显示完整；再继续缩小，水平出现滚动条，图片放不下。
}