自己怎么建个优惠网站,网络营销策划的流程及要点,如何成为游戏代理,呼和浩特网站建设SEO优化Web —— css基础 1. CSS样式表2. CSS的三种引入方式3. CSS 语法4. CSS 选择器4.1 元素选择器4.2 类选择器4.3 ID选择器4.4 属性选择器4.5 后代选择器4.6 子元素选择器4.7 伪类选择器4.8 分组选择器 5. 颜色和字体6. 显示方式display7. 盒子模型7.1 盒子模型 - 外边距塌陷7.2 盒… Web —— css基础 1. CSS样式表2. CSS的三种引入方式3. CSS 语法4. CSS 选择器4.1 元素选择器4.2 类选择器4.3 ID选择器4.4 属性选择器4.5 后代选择器4.6 子元素选择器4.7 伪类选择器4.8 分组选择器 5. 颜色和字体6. 显示方式display7. 盒子模型7.1 盒子模型 - 外边距塌陷7.2 盒子模型 - 父元素消失7.3 盒子模型 - 边框和外边距 8. CSS三大特性 1. CSS样式表 CSS (Cascading Style Sheets层叠样式表是一种用来为结构化文档如 HTML 文档或 XML 应用添加样式字体、间距和颜色等的标记型计算机语言使网页更具吸引力和可读性 作用将文档的内容与其呈现方式分离通过将样式应用到HTML元素上可以改变字体、颜色、大小、间距、边框等各种视觉效果从而实现对网页的个性化定制 特点 层叠性Cascading多个样式规则可以应用于同一个元素且具有不同的优先级 继承性Inheritance某些样式属性会被子元素继承简化了样式定义的工作 选择器Selectors通过选择器来选择要应用样式的元素 盒模型Box Model网页中的每个元素都被看作是一个矩形框包括内容区、内边距、边框和外边距
2. CSS的三种引入方式 内联样式 ▶ ➤ 内联样式将CSS代码直接应用到HTML元素的style属性中不能复用 应用场景适用于只需在某个具体元素上应用样式并且不会被其他样式覆盖的情况 p stylecolor: red;这是一个红色的段落。/p内部样式 ▶ ➤ 内部样式表将CSS代码直接写在HTML文档头部head的style标签中只能当前页面复用 应用场景适合于只在一个HTML文档中使用的样式或者在一个小块区域内定义特定的样式 headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS引入方式/title!-- 内部样式只能当前页面复用 --style/* 标签选择器 */h3 {color: #c4a2a2;}/style
/head外部样式 ▶ ➤ 将CSS代码保存在一个独立的.css文件中并通过link标签将其与HTML文档关联起来支持多页面复用 应用场景最常用和推荐的方式全站样式统一提高页面加载速度方便样式维护等场景 headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS引入方式/title!-- 引入外部样式多页面复用 --link relstylesheet href../css/01-外部css.css
/head3. CSS 语法 css语法的两个主要组成部分 ▶ ➤ 选择器一条或多条声明 属性CSS声明总是以分号 ; 结束声明总以大括号{}括起来 4. CSS 选择器
4.1 元素选择器 元素选择器 ▶ ➤ 会选取页面中所有匹配元素所以应该谨慎使用避免过度通用的选择器 应用场景对整个页面中某一类型的元素进行样式定义 p { color: red; }4.2 类选择器 类选择器 ▶ ➤ 可以为多个元素设置相同的类名类名应具有语义化以反映元素的用途或功能 应用场景标记一组具有相同类名的元素进行样式定义 .highlight { background-color: yellow; }4.3 ID选择器 ID选择器 ▶ ➤ 每个页面中的ID应该是唯一的不能重复使用ID选择器具有高优先级应避免滥用ID选择器保持简洁 应用场景标记唯一的元素进行样式定义 #header { font-size: 24px; }4.4 属性选择器 属性选择器 ▶ ➤ 根据元素的属性值选择特定的元素属性选择器支持多种匹配方式精确匹配、包含匹配、开始匹配、结束匹配等 应用场景根据元素的属性值进行选择进行样式定义 /* 选取所有input元素中type属性为text的元素并设置边框样式 */
input[typetext] { border: 1px solid #ccc; }4.5 后代选择器 后代选择器 ▶ ➤ 后代选择器可以选择父元素内部的所有符合条件的后代元素不要使用过于具体的后代选择器以免影响性能 应用场景选择元素的后代元素进行样式定义 div p { font-weight: bold; }4.6 子元素选择器 子元素选择器 ▶ ➤ 子元素选择器只能选择作为父元素直接子元素的元素并且不会进一步选择嵌套在子元素内部的元素 应用场景选择元素的直接子元素进行样式定义 ul li { list-style-type: none; }4.7 伪类选择器 伪类选择器 ▶ ➤ 伪类选择器的语法以冒号:开头后跟伪类名称伪类选择器一般用于定义与元素状态相关的样式例如鼠标悬浮、访问过、选中不同的伪类选择器可以组合使用实现更复杂的效果例如:hover:active可以同时定义鼠标悬浮和鼠标点击时的样式 应用场景根据元素的状态或特定条件来选择样式 a:hover {color: red;}/* :nth-child伪类选择器用于按序号选择特定子元素 */ul li:nth-child(odd) {background-color: lightgray;}4.8 分组选择器 分组选择器 ▶ ➤ 将多种选择器合并为一个规则在样式定义中更加灵活和高效 应用场景将相同样式应用于多个选择器减少代码重复 h1, h2, h3 {color: blue;font-weight: bold;}/* 将类选择器和元素选择器结合使用 */.highlight, p {background-color: yellow;}练习代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title选择器/titlestyle/* 标签选择器 */p {color: #808000;}/* id选择器选择某一个元素 */#tow {background-color: aquamarine;}/* 类选择器选择多个不相关的元素 */.content {color: rgb(97, 45, 8);}/* 分组选择器将多个选择器元素分成一组 */h1,h2,h3 {/* 分组选择器共同设置 */background-color: rgb(140, 169, 159);}/* 属性选择器 */input[typetext] {/* 根据输入框的属性值‘text’设置其背景 */background-color: rgb(116, 174, 95);}/* 后代选择器层级关系选择子元素 */body div div {/* 后代选择器容默认选到后台中所有相同的后代 */width: 200px;height: 200px;background-color: #656060;}/* 子元素选择器层级关系选择子元素精准选择 */bodydivdivspanp {/* 子类选择器选择子代中特定的元素 */color: #c64343;}/* 伪类选择器选择元素的状态 *//* 未访问 */a:link {color: rgb(18, 251, 255);}/* 访问过 */a:visited {color: rgb(221, 139, 242);}/* 悬停 */a:hover {color: rgb(255, 173, 20);}/* 点击/激活 */a:active {color: rgb(18, 86, 83);}/style
/headbodyh1标题一/h1h2标题二/h2h3标题三/h3input typetext nameuserdiv classsentenceh4心灵文案/h4articlep classcontent1、不负光阴不负自己不负被爱/pp idtow2、这个世界上没有人有义务对你好所以你应该这样想那些冷漠和刻薄是理所当然那些温柔相待才更应珍惜/pp3、请你一定要对号入座我说的所有星光月亮、清泉小溪、蘸着糖的奶油和蜂蜜……这世间所有的美好事物都只是为了形容你/pp4、森林不残酷吗有灾病猎杀但动物仍美好着。宇宙不残酷吗荒寂无回应但星辰仍美好着。社会也残酷有生死离别会井干路绝但人仍美好着/p!-- p5、没有任何事任何人需要你过了半夜12点还苦想不睡任何东西都不能以健康做交换记住你只能活一辈子/p --/article/divdivdivp后代选择器/p/divdivspanp子代代选择器/p/span/div/diva hrefhttps://www.baidu.com target_blank超链接/aa hrefhttps://www.baidu.com超链接/aa hrefhttps://www.baidu.com超链接/aa hrefhttps://www.baidu.com超链接/a
/body
/html5. 颜色和字体 RGB颜色红、绿、蓝三个分量的数值来表示颜色数值范围是0到255 十六进制颜色6位16进制数值来表示颜色前两位红色中间两位绿色后两位蓝色 RGBA颜色和RGB类似添加了一个透明度分量取值范围是0到1表示不透明到完全透明
练习代码 对同一个元素的同一个属性设置多个颜色前面的颜色会被覆盖 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title颜色/title
/head
style* {margin: 0;}h1 {/* 字体颜色 *//* 颜色名称 */color: red;/* 三位十六进制 */color: #000;/* 六位十六进制每两位表示rgb中的一个值 */color: #00ff00;/* rgb */color: rgb(0, 255, 255);/* rgba */color: rgba(200, 180, 0, 0);}#d1 {width: 500px;height: 300px;/* 背景颜色 */background-color: #95d49e;/* 背景图 */background-image: url(../../html/background3.jpg);/* 设置图片大小 */background-size: 500px 280px;/* 设置禁止重复 */background-repeat: no-repeat;/* 图片位置偏移值像素/百分比 */background-position: 0 20px;}#d2 {width: 611px;height: 376px;background-color: #e8e8ee;background-image: url(pc.png);background-repeat: no-repeat;background-size: 318px 319px;background-position: 90% 50%;}.font {font-weight: bold;font-size: 28px;color: rgba(216, 28, 28, 0.784);position: absolute;bottom: 200px;left: 100px;}
/stylebodyh1颜色测试/h1div idd1背景颜色/divdiv idd2/divdiv classfont售价4999/div
/body/htmlcss字体相关属性 ▶ ➤ 设置文本的字体颜色样式等 属性 text-align控制文本或元素在网页中的水平对齐方式 left文本左对齐 right文本右对齐 center文本居中对齐 justify文本两端对齐即两侧呈现完整的直边 text-decoration文本装饰效果 none没有任何装饰效果 underline给文本添加下划线 overline给文本添加上划线 line-through给文本添加中划线 /* 在一个段落中同时显示下划线和删除线 */
p {text-decoration: underline line-through;
}line-height设置行高行间距的大小决定了文本行与文本行之间的垂直间距 数字值指定行高的倍数值为1.5表示行高为字体大小的1.5倍 百分比值相对于父元素字体大小的百分比值为150%表示行高为父元素字体大小的1.5倍 长度值使用绝对单位如像素、点指定具体的行高值 行高设置为与容器高度相等可以实现垂直居中的效果 text-shadow在文本周围创建阴影效果 text-shadow: h-shadow v-shadow blur-radius color;h1 {text-shadow: 2px 2px 4px #888888;
}h-shadow指定阴影的水平偏移量可以为正数向右偏移或负数向左偏移 v-shadow指定阴影的垂直偏移量可以为正数向下偏移或负数向上偏移 blur-radius指定阴影的模糊半径值越大阴影越模糊 color指定阴影的颜色 font-size设置文本的字体大小 绝对长度指定一个固定的字体大小如像素px、点pt、毫米mm 相对长度相对于父元素或根元素的字体大小进行设置如em相对于父元素和rem相对于根元素 百分比相对于父元素的字体大小进行设置例如font-size: 120% font-weight设置文本的粗细程度或者字体的粗细属性 normal默认的字体粗细相当于400 bold较粗的字体相当于700 lighter比父元素更细的字体 bolder比父元素更粗的字体 数字值用于指定相对于常规字体粗细的相对值通常在100到900之间 其他字体样式设置 指定字体font-family: Franklin Gothic Medium, Arial Narrow, Arial, sans-serif; 斜体font-style: italic; 字体样式和大小一同设置 font: 50px sans-serif; 6. 显示方式display display显示方式 ▶ ➤ 控制元素在页面中的布局和显示行为 属性 block将元素显示为块级元素独占一行并且默认宽度为父元素的100%常见的块级元素有div、p、h1到h6 inline将元素显示为内联行内元素不会换行并且默认宽度由内容决定常见的内联元素有span、a、strong、em等 inline-block将元素显示为内联块级元素不会换行并且保留了块级元素的盒模型特性可以设置宽高、内边距和外边距等常见的内联块级元素有img、input、button等 none将元素隐藏不占据空间并且不会影响其他元素的布局相当于完全删除该元素 flex将元素显示为弹性容器通过flex-direction、flex-wrap等属性来控制子元素的排列方式(常用于响应式布局) grid将元素显示为网格容器通过grid-template-columns、grid-template-rows等属性来定义网格布局常用于复杂的二维布局 table将元素显示为表格类似于HTML中的table元素使用table-row、table-cell等属性来控制子元素的布局 inline-table将元素显示为内联表格类似于HTML中的table元素但是不会独占一行 list-item将元素显示为列表项并添加了项目符号常用于li元素 练习代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title显示方式/titlestyle.page {background-color: antiquewhite;border-radius: 10px;/* 将page中的元素居中 */text-align: center;}p {color: teal;text-align: center;font-weight: bold;}a {background-color: aquamarine;/* 将超链接行内元素改为行内块级元素 */display: inline-block;/* 设置宽高 */width: 280px;height: 25px;/* 水平居中 */text-align: center;/* 垂直居中 */line-height: 25px;/* 字体颜色 */color: brown;/* 去除下划线 */text-decoration: none;/* 字体大小 */font-size: 15px;/* 设置原图 */border-radius: 10px;}.inline {background-color: cadetblue;width: 200px;/* height: 200px; *//* 左右居中 */margin: 10px auto;/* 修改为行内元素 */display: inline;border-radius: 5px;}.inline-block {display: inline-block;width: 200px;height: 100px;background-color: darkkhaki;border-radius: 10px;margin-left: 10px;}.none {width: 200px;height: 200px;background-color: coral;/* display: none; */}.flex {width: 200px;height: 200px;background-color: darkmagenta;display: flex;/* 设置文本从右到左 */direction: rtl;}.grid {width: 200px;height: 200px;background-color: #c64a4a;display: grid;/* */grid-template-columns: max-content;}/style
/headbody!-- 元素显示方式display --!-- block块级元素默认值独占一行可修改宽高hpvivinline行内元素默认值共占一行不能修改宽高常见标签psanbisuainline-block行内块元素默认值共占一行可修改宽高input,img)none隐藏元素--div classpagep将行内元素转化为行内块元素/pa href#超链接属于行内元素/adiv classinline将块级元素转为行内元素宽度由内容决定/divspan classinline-block将行内元素转为行内块级元素不会换行能设置宽高/spandiv classnonenone将元素隐藏不占据空间并且不会影响其他元素的布局相当于完全删除该元素/divdiv classgridgrid将元素显示为网格容器可以通过grid-template-columns、grid-template-rows等属性来定义网格布局。常用于复杂的二维布局/div/divdiv classflexflex将元素显示为弹性容器可以通过flex-direction、flex-wrap等属性来控制子元素的排列方式常用于响应式布局/div
/body/html7. 盒子模型 盒子模型 ▶一个由指定大小的内容区的自身内边距边框外边距所构成的矩形盒子 ➤ CSS盒子模型是指在网页布局中每个HTML元素可以看做一个矩形的盒子盒子模型是一种设计思想模型 属性一个盒子模型包括四个部分 内容区Content包含元素的实际内容文本、图像或其他嵌套的元素内容区的宽度和高度可以通过width和height属性进行设置 内边距区Padding内边距是内容区与边框之间的空白区域内边距的大小可以通过padding属性进行设置内边距对于元素的背景色和边框不起作用 边框区Border边框是围绕内容区和内边距区的线条边框的样式、宽度和颜色可以通过border属性进行设置 外边距区Margin外边距是边框与相邻元素之间的空白区域外边距可以用于调整元素与其他元素之间的距。外边距的大小可以通过margin属性进行设置 两种盒子模型box-sizing属性来指定使用哪种盒子模型 标准盒子模型 box-sizing: content-box; ➤ 盒子的实际宽度 内容的宽度 左内边距 右内边距 左边框宽度 右边框宽度 ➤ 盒子的实际高度 内容的高度 上内边距 下内边距 上边框宽度 下边框宽度 IE盒子模型 box-sizing: border-box; ➤ 盒子的实际宽度 内容的宽度 左边框宽度 右边框宽度 左内边距 右内边距 ➤ 盒子的实际高度 内容的高度 上边框宽度 下边框宽度 上内边距 下内边距 不同的浏览器渲染后的各个属性值可能不一样此处使用的为QQ浏览器 盒子模型
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title盒子模型/titlestyle/* 盒子模型 */.box {width: 200px;height: 200px;background-color: darkseagreen;margin: 10px;border: 3px solid teal;padding: 5px;/* 标准盒子模型默认 */box-sizing: content-box;/* IE盒子模型 */box-sizing: border-box;}/style
/headbodydiv classbox盒子模型/div
/body/html7.1 盒子模型 - 外边距塌陷 块级元素外边距塌陷margin collapsing ▶ ➤ 两个相邻同级块元素的上下外边距会合并折叠成单个外边距的现象即取两个元素中外边距较大的值作为两者的外边距 解决方法 inline-block使用display: inline-block;改为行内块元素 设置为浮动 行内元素上下外边距无效元素左右不存在塌陷问题外边距相加 ▶ ➤ 两个行内元素不存在上下塌陷问题但是存在上下外边距失效问题行内元素的左右外边距为两个元素的外边距值相加 解决方法 转为块级元素使用display: block; padding取代margin line-height设置行高以在行内元素周围创建一定的空间从视觉上实现上下外边距的效果 父子粘连 ▶ ➤ 父元素与其第一个或最后一个子元素之间出现了外边距塌陷margin collapsing的情况导致父元素的外边距与子元素的外边距发生合并使它们的外边距表现得像是粘在一起一样称为“父子粘连” 解决方法 overflow属性父元素设置为overflow:hidden或者overflow:auto padding代替margin将父元素的外边距改为内边距以避免外边距的合并 border给父元素添加边框也可以防止外边距的合并 overflow:hidden创建一个新的块级格式化上下文父元素并将子元素溢出父元素的部分进行隐藏即子元素超出部分不可见从而阻止外边距的塌陷 塌陷问题
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title盒子模型/titlestyle/* 盒子模型 */.box {width: 200px;height: 200px;background-color: darkseagreen;margin: 10px;border: 3px solid teal;padding: 5px;/* IE盒子模型 */box-sizing: border-box;/* 标准盒子模型 */box-sizing: content-box;}.box-1,.box-2 {width: 200px;height: 200px;border: 1px solid rosybrown;}.box-1 {/* 左外边距 */margin-left: 200px;/* 上外边距 */margin-top: 200px;/* 下外边距如果下方没有元素则显示不出效果 */margin-bottom: 50px;/* 右外边距如果右边没有元素则显示不出效果 */margin-right: 50px;/* 四个方向的外边距相等 */margin: 50px;/* 上下相等左右相等 */margin: 20px 40px;/* 设置左右居中 *//* margin: 0 auto; *//* margin: 10px 20px 30px 40px; 上右下左顺时针赋值*/}.box-2 {/* 外边距塌陷上下相邻添加外边距取最大值此处2010 20 */margin-top: 10px;}.line-1 {border: 3px solid tan;/* 行内元素上下外边距无效 */margin-top: 50px;margin-bottom: 50px;/* 左右两元素值相加 */margin-right: 10px;}.line-2 {border: 3px solid rgb(140, 195, 210);/* 行内元素左右不存在塌陷问题 外边距相加 */margin-left: 80px;}.big {width: 200px;height: 200px;background-color: green;/* 1. 解决父子粘连问题绿色盒子不动仅移动红色盒子 */overflow: hidden;/* 2. 给父元素设置边框不会隐藏子元素内容 *//* border: 1px solid darkgoldenrod; */}.big.small {width: 50px;height: 50px;background-color: #9f2a2a;/* 上下外边距塌陷父元素中没有其他同级元素父子粘连对子元素设置外边距时会取最大值010,导致父元素向下移动60px */margin-left: 20px;/* 超出部分将被隐藏 */margin-top: 170px;}/style
/headbody!-- 盒子模型 --div classbox盒子模型/div!-- 塌陷问题 --div classbox-1盒子-1/divdiv classbox-2盒子-2/divspan classline-1行-1设置了上外边距50px失效/spanspan classline-2行-2左右距离相加/span!-- 内部盒子 --div classbigdiv classsmall小盒子/div/div/body/html7.2 盒子模型 - 父元素消失 父元素消失 ▶ ➤ 父元素没有指定高度子元素设置了浮动父元素会消失父元素因为内部浮动float、外边距折叠margin collapsing等原因导致高度塌陷或消失 解决方法 overflow使用overflow: hidden; 7.3 盒子模型 - 边框和外边距 border边框样式 ▶ ➤ border: [border-width] [border-style] [border-color]; 边框样式 none无边框 hidden隐藏边框 solid实线边框 dashed虚线边框 dotted点线边框 double双线边框 groove凹槽边框 ridge脊状边框 inset内嵌边框 outset外嵌边框 border-radius边框圆角 ▶ ➤ 设置元素的边框圆角效果 特点当圆角半径大于等于宽高的最小值时形状不再改变 /* 设置所有四个角的圆角半径 */
border-radius: 10px;/* 设置水平方向的圆角半径和垂直方向的圆角半径 */
border-radius: 5px 10px;/* 依次设置左上角、右上角、右下角和左下角的圆角半径 */
border-radius: 5px 10px 15px 20px;margin外边距 ▶ ➤ margin 是 CSS 中用来设置元素外边距的属性 使用特性1. 块级元素居中margin: 0 center; 2. 行内元素/行内块级元素居中在上级元素中加text-align: center; /* 设置所有四个方向的外边距 */
margin: 10px;/* 设置上下方向的外边距为 10px左右方向的外边距为 20px */
margin: 10px 20px;/* 依次设置上、右、下、左方向的外边距 */
margin: 10px 15px 20px 25px;body自带8px的外边距p标签列表标签h标签自带上下边距文本框自带边框和内边距列表标签自带外边距和内边距 body{margin: 0;}p,ul,h1{margin: 0;}input{border: 0;}ul{padding: 0;}边框和外边距
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title边框和外边距/titlestyle#d1 {width: 200px;height: 200px;/*
none无边框
hidden隐藏边框
solid实线边框
dashed虚线边框
dotted点线边框
double双线边框
groove凹槽边框
ridge脊状边框
inset内嵌边框
outset外嵌边框*//* 边框样式 */border: 20px inset teal;/* 大于宽高后不再改变 */border-radius: 100px;}/* body自带8px的外边距p标签列表标签h标签自带上下边距文本框自带边框和内边距列表标签自带外边距和内边距body{margin: 0;}p,ul,h1{margin: 0;}input{border: 0;}ul{padding: 0;}*/#d2 {width: 200px;height: 200px;border: 5px solid cornflowerblue;/* 给元素添加内边距时默认影响元素大小 */padding-left: 50px;padding-top: 50px;/* 需要添加相应元素去除影响 */box-sizing: border-box;}/* 练习 */body {margin: 0;}#id1,#id3 {width: 100px;height: 100px;}#id1 {background-color: red;margin-left: 20px;overflow: hidden;}#id3 {border: 3px solid goldenrod;margin-left: 120px;box-sizing: border-box;padding-left: 60px;padding-top: 50px;border-radius: 5px;}#id2 {width: 50px;height: 50px;background-color: green;margin: 0 auto;}/* 块级元素居中margin:0 center;行内元素/行内块级元素在上级元素中加text-align:center*//style
/headbodydiv idd1边框测试/divdiv idd2内边距/div!-- 练习 --p练习/pdiv idid1框1div idid2框2/div/divdiv idid3框3/div
/body/html8. CSS三大特性 层叠性Cascading ▶利用多个选择器对同一元素设置相同属性的不同样式冲突时会被覆盖 ➤ 多个选择器对同一个元素添加不同的样式元素样式效果层叠显示如果样式相同会由优先级决定 层叠性原则遵循的原则是就近原则哪个样式离结构近就执行哪个样式 继承性Inheritance ▶子元素可以继承父元素的某些 CSS 属性值 ➤ 如果子元素自身带效果则不受影响超链接 作用继承可以简化代码降低CSS样式的复杂性 优先级Specificity ▶多个 CSS 规则应用到同一个元素 ➤ !important内联ID选择器类选择器、属性选择器、伪类选择器标签选择器继承 优先原则选择器相同则执行层叠性选择器不同则根据选择器权重执行 CSS三大特性
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS三大特性/title!-- CSS层叠性多个选择器对同一个元素添加不同的样式元素样式效果层叠显示如果样式相同会由优先级决定CSS继承在子元素的属性会继承父元素的属性如果子元素自身带效果则不受影响超链接CSS优先级!important内联ID选择器类选择器、属性选择器、伪类选择器标签选择器继承--style/* CSS层叠性 */p {color: aquamarine;font-size: 18px;}/* 不冲突层叠 */.cascading {background-color: bisque;}/* 冲突覆盖 */#bg-color {/* ID选择器优先级高于类选择器 */background-color: rgb(61, 84, 76);}/* 继承 */div {/* 此时超链接自带颜色不受继承影响 */color: blueviolet;}/* 优先级 */span {/* 覆盖继承的颜色继承的优先级低 */color: #000;}#link {/* 去除超链接的下划线 */text-decoration: none;}/* 产生冲突ID选择器优先级高于元素选择器优先级 */a {/* 添加!important最高优先级 */text-decoration: underline !important;}/style
/headbodydivdiv盒子p classcascading idbg-colorp标签/pspanspan行标签颜色继承自div标签/spana href idlink超链接/a/div
/body/html
