他的回复:
华为云ID：hw89657081CSS 第二章 CSS的选择器一、通配符选择器和元素选择器1.什么是通配符选择器* CSS的通配符选择器是一种比较特殊的选择器，用"*"表示* 格式：*{ property: value; ...... }* 含义：可以选中页面中所有元素，对所有元素都生效* 用途：一般用于设置一些初始化的公共属性2. 例如：* { margin: 0px; padding: 0px; }元素选择器1. 什么是元素选择器* 使用某个HTML元素名作为选择器* 是一种最简单的选择器* 格式：E { property: value; ...... }2.例如：华为手机发布会二、id选择器和类选择器id选择器1.id 选择器* id是指我们可以在HTML标签上设置一个id属性值* id属性的特点是一个HTML文档，只能有唯一的一个，不能重复* 格式为：#id { property: value; ...... }* 含义：可以选中页面中含有id属性值的元素2.例如：华为5G技术类选择器1.什么是类选择器* 格式：.class { property: value; ...... }* 类选择器中的类指的是class属性* 有相同class属性值的都会被选中* class与id相比不具有唯一性* class属性的值通常以字母开头中间不能有空格* 类选择器可以和元素选择器组件使用2.例如：华为5G技术三、属性选择器和伪类选择器属性选择器1.什么是属性选择器* 属性选择器是用于对具有某种属性的元素设置CSS样式* 格式为：E[attribute] { property: value; ...... }* E代表元素，[]表示元素的属性2.属性的种类* [attribute]用于选取指定属性（attribute）的元素* [attribute=value]用于选取指定属性（attribute）和指定属性值（value）的元素* [attribute~=value]用于选取属性值中包含指定值的元素* [attribute|=value]用于选取以指定值开头的属性值的元素]3.例如：春风十里伪类选择器1.什么是伪类* 伪类是指那些处在一定状态的元素* 伪类以冒号开头2.什么是伪类选择器* 通过伪类来选中相应元素进而添加样式的选择器* 伪类名可以单独使用，也可以和其它选择器一起使用* 一般伪类选择器通常和元素名称一起使用，用于选中某一元素的伪类* 元素选择符和冒号之间不能有空格* 伪类选择器最喜欢和超链接（a元素）一起使用3.伪类如下：* :link表示未被访问的链接* :visited表示已被访问的链接* :hover鼠标经过链接上方时的状态* :active链接被激活时的状态* 这个顺序很重要4.例如：华为官网四、派生选择器派生选择器1.后代选择器* 后代选择器主要是用来选择某个元素的后代元素* 格式为：父元素 子元素 { property: value; ...... }* 注意点：父元素与子元素之间至少有一个空格，可以有很多空格例如：p span { color: red; }2.子元素选择器* 格式为：父元素 > 子元素 { property: value; ...... }* 用来选择作为某一个元素子元素的元素* 与后代选择器的区别是后代选择器选的是所有子元素，而子元素选择器只选第一级子元素例如：p > span { color：red; }3. 相邻兄弟选择器* 格式为：父元素 + 子元素 { property: value; ...... }* 用来选择紧跟在一个元素之后的兄弟元素* 这两个相邻元素一定是同级元素例如：div + p { color: red; }五、选择器权重1.什么是选择器的权重* 一个小例子引发的思考* 再回味一下层叠样式表单的本质2.权重规则* 通配符选择器的权重：0* 标签选择器的权重：1* 类、伪类、属性选择器的权重：10* id选择器的权重：100* 内联样式的权重：1000* 特殊处理：!important（强制使用）3.优先级规则* 选择器都有一个权值，权值越大越优先* 当权值相等时，后出现的样式表设置要优于先出现的样式表设置* 创作者的规则高于浏览者：即网页编写者设置的CSS样式的优先权高于浏览器所设置的样式* 继承的CSS样式不如后来指定的CSS样式* 在同一组属性设置中标有"!important"规则的优先级最大CSS 第三章 CSS常用属性**第一节 字体**1.字体* 使用font-family属性来定义文字的字体* 属性值为字体的名称，可以设置多个字体名称，浏览器会按照顺序使用它第一个支持的字体* 字体优先级列表2.字体尺寸* 使用font-size属性来定义文字的尺寸* 属性值为长度值，例如：30px，也可以使用百分比，例如：50%3.字体样式* 使用font-style属性设置文字为斜体* 默认属性值为normal显示标准效果* 当属性值为italic时显示倾斜效果4.字体粗细* 使用font-weight属性设置文字的粗细* 默认值为normal，相当于400，显示效果为正常粗细* 当属性值为bold时，相当于700，显示为粗体* 当属性值为bolder时，显示更粗* 当属性值为lighter时，显示更细* 也可设置属性值为一个具体数值 100/200/300/400/500/600/700/800/9005.简写属性* 使用font属性来定义所有文字的样式* 各个属性值用空格分隔* font = font-family + font-size + font-style + font-weight例如：p { font: monospace 50px bold italic }**第二节 文本**1.颜色* 使用color属性来设置文本的颜色* 属性值可以是颜色名、十六进制颜色值、RGB颜色值2.行高* 使用line-height属性来设置文本行高* 默认值为：normal* 其它属性值为长度值、百分比3.对齐方式* 使用text-align属性来设置文本的对齐方式* 属性值有：left（左）、right（右）、center（中）4.方向* 使用direction属性设置文本的方向* 属性值有：ltr（左）、rtl（右）* 注意与对齐方式属性的区别5.缩进* 使用text-indent属性设置段落的首行缩进* 默认值为0，其它属性值有：长度值、百分比6.装饰线* 使用text-decoration属性设置文本的装饰线* 属性值有：underline（下画线）、overline（上画线）、line-through（中画线）* 默认值为none，表示没有线7.间隔* 使用letter-spacing属性设置文本字符间隔的大小* 属性值为长度值，可为负值8.阴影* 使用text-shadow属性来设置文本的阴影* 属性值为：X轴偏移量 + Y轴偏移量 + 模糊距离 + 颜色* 例如：text-shadow：10px 10px 5px gray1.宽度和高度* 使用width属性定义宽度* 使用height属性定义高度* 属性值为：auto、长度、百分比2.最小宽度和最小高度* 使用min-width属性定义最小宽度* 使用min-height属性定义最小高度3.最大宽度和最大高度* 使用max-width属性定义最大宽度* 使用max-height属性定义最大高度**第四节 列表**1.list-style-image* 用于指定一个图片做为列表项前面的标记* 默认值为none* 可以设置一个图片的url作为标记图片2.list-style-position* 用于设置在什么位置显示列表项前面的标记* 默认值为outside* 还可设置为inside3.list-style-type* 用于设置列表项前面图标的类型* 默认值为disc，其它值：circle、square、decimal、none、lower-alpha、upper-alpha4.list-style* 这是一个简写属性* list-style = list-style-image + list-style-position + list-style-type* 其属性值可以省略几项例如：ul { list-style: decimal inside }**第五节 背景**1.background-color* 用来设置元素的背景颜色* 默认值为：transparent* 3种方法直接设置颜色：颜色名、十六进制颜色、rgb函数* 颜色名：red* 十六进制颜色：#ff0000* rgb函数：rgb(255, 0, 0)2.background-image* 通用来设置元素的背景图片* 默认值为：none* 还可以设置一个图片的url地址，用来作为背景图片3.background-repeat* 主要用来配合background-image属性一起使用，用来设置背景图片的平铺方式* 默认值为：repeat，表示将背景图片在x轴和y轴方向平铺显示* 还可设置为沿X轴平铺（repeat-x）、沿Y轴平铺（repeat-y）、不平铺（no-repeat）4.background-position* 也是用来配合background-image属性一起使用，用来设置背景图片的起始点位置* 标默认为左上角零点位置* 位置参数：X轴方向left、center、right；Y轴方向top、center、bottom* 百分比：X轴位置x%，Y轴位置y%* 长度：X轴离原点长度、Y轴离原点长度5.background-attachment* 用于设置背景图片固定或者跟随页面滚动* 默认值：scroll* 还可以设置为fixed6.background* 简写属性* background = background-color + background-image + background-repeat + background-position + background-attachment* 可以全部设置，也可以省略其中几项CSS 第四章 CSS盒模型**盒模型**1.什么叫盒模型？* 盒模型，英文叫做Box Model* 所有的HTML元素都可以看作一个盒子模型* 我们可以把盒模型就想象成为一个盒子* 盒模型中主要用来对HTML元素进行布局时使用2.盒模型的作用？* 浏览器在渲染页面的时候就会根据CSS盒模型的规则，将所有的HTML元素表示为一个个的矩形盒子，之后CSS的相关属性就作用在这些盒子上，决定了盒子的大小位置和属性等，最终显示出来。3.盒模型的构成* 一个盒模型是由4大部分所组成的* 元素内容（content）、内边距（padding）、边框（border）、外边距（margin）例如：```.box { padding: 20px; border: 5px solid #000000; margin: 50px;}```我是一个无情的div元素**内边距**1.什么是内边距？* 内边距是指在HTML元素内容和边框之间的区域* 使用CSS属性padding来表示* 属性值为长度值或百分比，默认值是0* 注意取长度值时不能为负值* 百分比值相当于父元素的长度比例2.内边距的各个小属性？* 使用padding-top定义上内边距* 使用padding-right定义右内边距* 使用padding-bottom定义下内边距* 使用padding-left定义左内边距* padding为简写属性例如：```.box1 { padding: 20px;}.box2 { padding-top: 50px;}.box3 { padding-right: 10%;}```**边框**1.边框* 围绕元素内容和内边距的一条边线* 使用属性border代表边框* 我们可以使用边框属性精确控制这条线的样式、宽度、颜色2.边框样式* 使用border-style设置边框的样式属性* 还可分别设置上下左右四条边框的样式属性* 默认值为none，表示无边框* 还可以设置多种样式，分别为dotted、dashed、solid、double、groove、ridge、inset、outset等3.边框宽度* 使用border-width设置边框的宽度属性* 和边框样式一样，还可分别设置上下左右四条边框的宽度* 使用3种标准边框：thin、medium、thick* 使用长度值作为宽度属性的属性值4.边框颜色* 使用border-color设置边框的颜色* 还可分别设置上下左右四条边框的颜色* 和背景颜色属性一样，可以直接设置颜色名、十六进制颜色值或rgb函数值5.复合属性* 复合是指一次使用多种样式定义边框* 可以使用border-top、border-right、border-bottom、border-left分别定义四条边框的所有属性，属性值是样式、宽度和颜色，其中宽度和颜色可以省略* 还可以直接使用border属性一次性对四条边框同时设置，属性值同样是样式、宽度和颜色，其中宽度和颜色可以省略例如：```.box { border-style: solid;}.box1 { border-width: 5px;}.box2 { border-color: red;}.box3 { border-top: 1px dashed #00ff00;}.box4 { border: 1px dotted #0000ff;}```**外边距**1.什么是外边距？* 外边距是指元素边框之外的区域* 设置外边距会在元素外围创建额外的空白空间* 外边距的作用是控制元素和元素之间的距离* 使用margin属性来设置外边距* 还可以使用margin-top，margin-bottom，margin-left，margin-right分别控制元素不同方向的外边距* 属性值可以是长度值或者百分比，如果为长度值，不能为负值* 当时使用margin简写属性时，取值的含义与padding相同2.居中显示* margin有一个很常用的特殊用法，margin左右属性值设为auto时，可以设置元素左右居中显示**display属性**1.display的属性* display属性用于控制元素如何显示* 当属性值为block时，会将元素以块级元素的方式显示* 当属性值为inline时，会将元素以内联元素的方式显示* 当属性值为inline-block时，会将元素以内联块级元素的方式显示，会同时具有这两个显示特性* 当属性值为none时，元素将会被隐藏例如：.box1 { display: inline;}.box2 { display: block;}我是一个div块级元素，现在被当成内联元素显示了我是一个span内联元素，现在被当成块级元素显示了
