CSS选择器

1、标签选择器

选择所有同名标签

2、css复合选择器

有两个或多个基础选择器,通过"不同的方式"组合而成

3、后代选择器

选中子孙后代(需要标签是嵌套关系)

选择器1 选择器2 选择器3...{

}

4、子元素选择器

只能选中子代(亲儿子)

选择器1 > 选择器2 > 选择器3...{

}

5、兄弟选择器

需要标签是同级关系(兄弟关系)

选择器1+选择器2+选择器3...{

}

找到下一个相邻的标签

6、并集选择器(分组选择器)

把多个选择器放在同一组,它们具有相同样式,分组选择器一般用于提取公共样式,公共样式写在分组选择器里面,不同的样式单独写

选择器1,选择器2,选择器3...{

}

7、交集选择器

标签选择器类选择器{

}

标签选择器id选择器{

}

8、同胞选择器(E~F)

选某元素后面所有的同胞元素,E和F是同级元素,且F在E的后面,它们之间可以有,也可以没有其他同胞元素,同胞元素就是兄弟元素

9、属性选择器

9.1 语法1

9.1.1 通过已经存在的属性名或者属性值匹配元素

9.1.2 title标签是HTML标签的全局属性,所有html标签都有

9.1.3 [attr]表示带有以attr命名属性的元素

9.1.4 [attr="value"]表示带有以attr命名的属性,且属性值为value的元素

9.1.5 [attr^ ="value"]表示带有以attr命名的属性,且属性值是以value开头的元素

9.1.6 [attr$="value"]表示带有以attr命名的属性,且属性值是以value结尾的元素

9.1.7 [attr*="value"]表示带有以attr命名的属性,且属性值至少包含一个value值的元素

9.2 语法2

9.2.1 [attr~="value"]表示带有以attr命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少有一个值为value

9.2.2 [attr|="value"]表示带有以attr命名的属性的元素,属性值为"value"或是以"value-"为前缀

10、伪选择器

10.1 满足一定条件,才会显示

10.2 语法

10.2.1 css选择器:伪类{css属性:css属性值;}

10.2.2 链接伪类选择器(锚伪类):通过超链接的不同状态,对其设置不同的样式

10.2.3 链接伪类选择器有四个状态,书写时,有顺序要求,爱恨准则(先有爱,后有恨)

选择器名 描述

:link 未访问的状态 超链接没有被访问

:visited 访问过后状态 超链接已经被访问

:hover 鼠标放上状态 鼠标放在超链接上面,但是并没有将鼠标左键按下去

:active激活状态 鼠标左键已经按下,但是并没有将鼠标左键弹出

10.2.4 伪类选择器都是带有":"

10.2.5 :link和:visited只对a标签有效,:hover和:active对任何元素都有效，:hover鼠标移上元素以后的样式

10.2.5 超链接的美化

很多网页a链接的:link和:visited是同一个样式,而:hover和:active也是同一个样式

10.2.6 表单伪类

:focus 获取焦点以后的样式

10.3 结构伪类选择器

E代表元素

10.3.1 E:first-child 匹配父元素中的第一个子元素E

10.3.2 E:last-child 匹配父元素中最后一个子元素E

10.3.3 E:nth-child(n) 匹配父元素中的第n个子元素E

10.3.4 使用关键字odd表示奇数,even表示偶数

            2n就是2的倍数

            如果n是公式,则从0开始计算

10.3.5 nth-of-type选择器:

E:first-of-type 指定类型E的第一个

E:last-of-type 指定类型E的最后一个

E:nth-of-type(n) 指定类型的第n个

使用first-child,last-child,nth-child需要看html结构所在位置

10.4 伪类选择器

10.4.1 给页面上的元素设置样式，"必须满足一定的条件"，我们的伪类选择器设置的样式才会显示。

比如,  :hover 鼠标悬停在元素上面的以后,才会触发的样式

10.5 伪元素选择器

10.5.1 伪元素顾名思义,就是假的元素,不是真正HTML元素; 在 CSS 中允许使用伪元素来添加一些选择器的特殊效果

10.5.2 E::first-letter 文本的第一个字母或字(如中文、日文、韩文等）

10.5.3 E::first-line   文本第一行

10.5.4 E::selection  选中文本以后的样式

10.5.5 "first-letter" 伪元素只能用于"块级元素"。这个伪元素用于指定一个元素第一个字母的样式。所有前导标点符号应当与第一个字母一同应用该样式。

10.5.6 "first-line" 伪元素只能用于"块级元素"。

10.5.7 E::selection只可以应用于少数的CSS属性:   color, background,text-shadow文字阴影

10.5.8 lorem+n个  可以生成n个英文单词

10.5.9 E::before伪元素和E::after伪元素

10.5.10 E::before伪元素在标签内容之前添加一个"行内元素",通过content属性设置行内元素的标签内容,content属性不能省略

10.5.11 E::after伪元素在标签内容之后添加一个"行内元素",通过content属性设置行内元素的标签内容,content属性不能省略

10.5.12 没有标签内容,before和after也可以生效

11、通过.div1~.div5现象观察,我们可以得到结论,默认纯字母或者纯数字,是不会自动换行的;  只有中文内容才会自动换行; 但是可以通过设置word-break: break-all;属性实现英文和数字自动换行

12、列表样式属性

12.1 只给无序列表和有序列表使用

12.2 列表样式属性可以给ul,ol,li,这三个标签设置都可以

12.3 列表样式类型list-style-type取值:disc实心圆,square正方形,circle空心圆,none没有项目列表符号

12.4 列表项目符号出现的位置list-style-position取值:inside里面,outside外面(默认值)

12.5 使用图片替换列表项目符号list-style-image:取值 url(图片所在路径)

12.6 list-style简写属性,可以设置列表相关样式,多个属性之间使用空格隔开,没有顺序要求,也可以省略

12.7 一般我们使用列表项目符号样式的时候,都是去掉列表项目符号,所以记住list-style-type:none或list-style:none

13、元素显示方式

13.1 块级元素

13.1.1 多个同名元素默认会独占一行

13.1.2 且宽高属性起作用

13.1.3 宽度默认父元素的百分百

13.1.4 eg:div,h1-h6,p,ul,li,ol...

13.2 行内元素

13.2.1 不会独占一行,一行可以显示多个

13.2.2 默认宽度由内容决定

13.2.3 不能设置有效宽高

13.2.4 eg:span,i,s,del,b,strong,em,ins,a...

13.3 行内块元素

13.3.1 具有行内元素的部分特点,又具有块级元素的部分特点

13.3.2 可以一行显示,并且可以设置宽高度

13.3.3 默认宽度就是它本身的宽度

13.3.4 eg:input,img,textarea...

13.4 改变元素的显示方式

13.4.1 通过display属性可以改变元素的显示方式,改变成什么元素,就具有什么元素的特点

display:block转化成块级元素

display:inline转成行内元素

display:inline-block转成行内块元素

14、css背景属性

14.1 background-color设置背景颜色,取值颜色值

14.2 background-image:url(背景图片所在路径)设置背景图片

14.3 背景图片可以覆盖背景颜色

14.4 background-repeat设置背景图片的重复方式

14.4.1 取值:repeat 水平垂直方向都重复

repeat-x 水平方向重复

repeat-y 垂直方向重复

no-repeat 水平垂直方向都不重复

14.5 css背景定位

14.5.1 background-position,决定从什么位置显示我们的背景图片

1 方向位置英文单词 水平 left center right 垂直 top center bottom

2 百分比取值 正负值都允许

3 具体数值带css单位 正负值都允许

14.5.2 背景定位应用-精灵图(雪碧图):

如果想要雪碧图中某个小图片,我们就需要使用背景定位技术

1 把目标小图片,通过背景定位,移动到元素的左上角

2 改变高度宽度,让元素的宽度高度仅能显示这个小图片

3 通过这个网站可以备注我们实现背景定位:Sprite Cow - Generate CSS for sprite sheets

14.5.3 背景简写属性

background简写属性,可以设置背景相关样式属性,没有顺序要求,每个属性值以空格隔开,可以省略某个或者某些属性值

注意:background简写属性会清空之前设置的背景相关属性

15、overflow属性

15.1 overflow定义一个元素的内容太大而无法适应 块级格式化上下文时候该做什么

15.2 取值:visible,hidden,scroll,auto,inherit

1 visible:默认,内容不会修剪,会呈现在元素框之外

2 hidden:内容会被修剪,并且其余内容不可见

3 scroll:内容会被修剪,浏览器会显示滚动条以便查看其余内容

4 auto：由浏览器定夺，如果内容被修剪，就会显示滚动条

5 inherit： 规定从父元素继承overflow属性的值

15.3 溢出隐藏

1 强制显示滚动条,不管内容是否超出,都会有滚动条出现

2 自动显示滚动条,当前内容超出以后,才会出现滚动条

16、css三大模块

16.1 盒子模型

16.1.1 盒子模型(内容width,height+边框border+内容填充padding+外边距margin),浮动(float),定位(position),其余都是细节。

16.1.2 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的"内容(width,height)"、"内边距(padding)"、"边框(border)"和"外边距(margin)"组成。

16.2 边框

16.2.1 属性border: border-width border-style border-color;( 边框粗细 边框样式 边框颜色)

16.2.2 边框粗细取值是数值带px单位

16.2.3 边框样式取值 solid实线 dashed虚线 none没有线 double(双实线) dotted(点状线)

16.2.4 边框颜色取值就是颜色值

16.2.5 border设置的是四个方向(上下左右)的边框线

16.2.5.1 /* 设置不同方向的边框 */

            /* border-top: 边框粗细 边框样式 边框颜色;

            /* border-bottom: 边框粗细 边框样式 边框颜色;

            /* border-left: 边框粗细 边框样式 边框颜色;

            /* border-right: 边框粗细 边框样式 边框颜色;

16.2.5.2 /* 设置四个方向的边框线 */

            border: 10px solid blue;

            /* 去掉右边框线 */

            /* border-right: 10px none blue;

            /* border-right: none;

            /* border-right: 0px;

            /* 一个border-left等同于设置了下面3个属性

            border-left-width

            border-left-style

            border-left-color */

            /* border-left: 5px solid black; */

            /* 设置左边框线的颜色 */

            border-left-color: black;

            /* 设置右边框线的样式 */

            border-right-style: dashed;

            /* 设置下边框线的粗细 */

            border-bottom-width: 10px;

16.2.6 边框应用-制作三角形

16.2.7 圆角边框

16.2.7.1 圆角边框属性:border-radius: 数值带px单位或者百分比;

16.2.7.2 设置border-radius:50%可以让一个正方形变成圆形

/* border-radius: 一个值;

            /* border-radius: 20px;

            /* border-radius: 两个值;

            /* border-radius: 20px 80px;

            /* border-radius: 三个值;

            /* border-radius: 20px 80px 0px;

            /* border-radius: 四个值;

            border-radius: 10px 20px 30px 40px;(顺时针)

16.3 轮廓属性

轮廓属性outline,也称之为外轮廓线,外边框线

outline语法跟border的语法几乎一样

outline: 2px solid red;

去掉input标签的外轮廓线:outline: none;

16.4 内填充

16.4.1 内填充指的是 从"内容到边框"的距离

        /* padding的取值是数值带px单位,只能正值,不允许负值 */

        /* padding:1个值 */

        /* padding:2个值 */

        /* padding:3个值 */

        /* padding:4个值 */

16.4.2 设置某个方向的内填充

        /* padding-top上填充 */

        /* padding-bottom下填充 */

        /* padding-left左填充 */

        /* padding-right右填充 */

/* padding: 10px; */

            /* padding: 4个方向都是这个值 */

            padding: 10px 20px;

            /* padding: 上下 左右 */

            /* padding: 10px 20px 30px; */

            /* padding: 上 左右 下; */

            /* padding: 10px 20px 30px 40px; */

            /* padding: 上 右 下 左 */(顺时针)

padding和border会撑开盒子宽度跟高度 但是padding只能影响内容,不影响背景图片

默认盒子真实宽度 =  宽度 + 左右边框 + 左右内填充

默认盒子真实高度 =  高度 + 上下边框 + 上下内填充

16.5 margin

16.5.1 margin外边距, 是盒子与盒子之间的距离 是边框外面的距离 

        /* margin的用法跟padding类似 */

        /* margin的取值可以写数值带px单位, 允许"负值" */

        /* margin的取值还可以写一个auto关键字, auto表示自动的意思 */

        /* margin:10px; */

        /* margin:10px 20px; */

        /* margin:10px 20px 30px; */

        /* margin:10px 20px 30px 40px; */

        /* margin-top上外边距 */

        /* margin-right右外边距 */

        /* margin-bottom下外边距 */

        /* margin-left左外边距 */

 /* 去掉列表项目符号 */

            list-style: none;

16.5.2 给元素设置  边框线 或者 外轮廓线 或者 背景颜色,可以观察元素所在位置

16.5.3 padding只影响内容,不影响背景

16.5.4 content的属性取值可以写内容,也可以通过url()设置背景图片

16.5.5 margin实现盒子水平居中

16.5.6 让元素内容水平居中

text-align: center;

16.5.7 实现单行文字垂直居中

line-height: 50px;

16.5.8 /* auto表示自动分配剩余空间

/* margin-left: auto;表示把所有剩余空间都给左边

/* margin-right: auto;表示把所有剩余空间都给右边

/* margin实现盒子水平居中(重点,常用,必须得掌握)

16.6 让一个盒子实现水平居中，需要满足以下三个条件

            1. 必须是块级元素。

            2. 盒子必须指定了小于父元素100%的宽度(width)

            3. 然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

/* margin: 0 auto; */

/* margin: 100px auto; */

/* margin: auto; */

某些HTML标签自带padding或者margin

16.6.1 /* 使用分组选择器优化 */

        /* body,ul,h1,h2,h3,h4,h5,h6,p,dl,dd{

            margin: 0;

            padding: 0;

        } */

16.6.2  /* 使用通配符选择器 */

文字水平居中 text-align:center

盒子水平居中 设置已有宽度的块级元素的左右margin为auto

图片水平居中 设置父元素的text-align:center

图片水平居中 设置父元素的padding-left

图片水平居中 设置子元素的margin-left

背景图片水平居中 使用背景定位属性background-position

16.6.3 初始化样式开始

/* 清除所有标签的内填充和外边距 */

{

            margin: 0;

            padding: 0;

 }

17、步骤

第一步: 先根据效果图,写出合理的HTML结构

第二步: 先写初始化样式,再写具体样式

第三步: 先写大盒子样式,再写小盒子样式(从左到右,从上到下)

标准文档流就是HTML元素的默认排列方式, 块级元素独占一行, 行内元素或者行内块元素不独占一行