层叠样式表 Cascading Style Sheet ,定义如何显示HTML元素
1）css语法结构
选择器 {属性:属性值;属性:属性值;属性:属性值;}
p {color: red} 标签名｛颜色属性：颜色；｝
2）css注释
/*注释内容*/
3）三种引入css样式的方式
引入：link标签引入外部css文件
内部：head内style标签内部直接书写css代码
行内：直接在标签内通过style属性书写css样式
注意：页面css样式通常都应该写在单独的css文件中
<!--引入--> <head> <link href="mystyle.css" rel="stylesheet"> </head> <!--内部--> <head> <style> p{ background-color: #336699; } </style> </head> <!--行内--> <p style="color: red">行内style</p>
4）学习css的流程
1.先学如何查找标签
基本选择器：标签选择器 p、id、类、通用选择器
标签选择器: p标签
id选择器: #i1
类选择器：.c1
通用选择器：*
<style> p { color: red; } #i1 { background: red; } .c1 { font-style: normal; } * { font-kerning: auto; } </style>
组合选择器：
后代选择器：div p 所有 div 内部的 p 标签
儿子选择器: div>p 所有父级是 div 的 p 标签
毗邻选择器: div+p 所有紧挨着 div 的 p 标签
弟弟选择器: #i1~p i1后面所有的同级的 p 标签
<style> div p { color: aqua; } div>p { background-color: aquamarine; } div+p { font-size: large; } #i1~p {border: solid royalblue 2px;} </style>
属性选择器
p[title] 带有指定属性title的标签
p[title="123"] 带有指定属性title和值123的标签
<style> p[title] { color: chartreuse; } p[title="one"]{ color: red; } </style>
伪类选择器
input输入框获取焦点style：input:focus{}
以a链接标签为例： 未访问链接 a:link
已访问链接 a:visited
鼠标移动到链接上 a:hover
选定链接 a:active
<style> div,p,span { color:red } a:link { color:red; } a:hover { color:yellow; } a:active { color:black; } a:visited { color:green; } input:focus { outline: none; background-color:red; } </style>
伪元素选择器：针对标签里的特定内容设定样式
first-letter 首字母
before 标签之前插内容
after 标签之后插内容
<style> p:first-letter{ font-size:48px; color: magenta; } p:before{ content:‘???‘; color:dodgerblue; } p:after{ content:"(?ω＜)☆ "; color:orangered; } </style>
分组和嵌套
分组：多个元素的样式相同时，可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式
嵌套：多种选择器可以混合起来使用 例：.c1类内部所有p标签设置字体颜色为红色
div, p { color: red; } .c1 p { color: red; }
2.如何给查找到的标签设置样式
1.id用来唯一标识标签
2.标签类属性class(******),可以有多个值
ps:你可以把它理解成python面向对象的继承3.可以给任意的标签加任意的属性名和属性值
5）选择器的优先级
1.相同的选择器，不同的引入方式： 就近原则，越靠近标签优先级越高
2.不同的选择器，相同的引入方式： 行内 > id选择器 > 类选择器 > 标签选择器
6）如何修改标签样式
1.宽 width 高 height 块儿级标签才能设置
div { width: 100px; height: 100px; }
2.字体大小font-size、字重（粗细）font-weght
字重：normal标准（400）、bold粗体（700）、bolder更粗、lighter更细、inherit继承父类粗细、100~900设置具体粗细
p { font-size: 16px; font-weight: lighter; }
3.字体颜色color：以下四种任选一种
rgba的最后一个参数：透明度，范围 0.0~1.0
p { color: red; color: #ff6928; color: rgb(130, 48, 255); color: rgba(76, 255, 61, 0.8); }
4.文本属性text：
文字对齐text-align：center居中、left左对齐、right右对齐、justify两端对齐
文字装饰text-decoration：none、underline下划线、overline上划线、line-through划掉、inherit继承
首行缩进text-indent：48px;
p { text-align: center; text-decoration：underline； } a { text-decoration: none; } p { text-indent: 48px; }
5.背景属性background：
背景颜色 -color
背景图片 -image url("")
背景位置 -position center
背景重复 -repeat 默认平铺，repeat-x水平方向最上平铺一排，repeat-y充值方向最左平铺一列， no-repeat不平铺
<style> div { width:1000px; height:400px; background-color: aqua; background-image:url("MySQL_wps图片.png"); background-repeat: no-repeat; background-position: center; } </style> <!--简写--> <style> div { width:1000px; height:400px; background: no-repeat center url("MySQL_wps图片.png") blue } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>滚动背景图示例</title> <style> * { margin: 0; } .box { width: 100%; height: 500px; background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559733904&di=d48adc96ca63da62d56fef7d9257c5e6&imgtype=jpg&er=1&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201404%2F13%2F20140413212610_JiUtU.jpeg") center center; background-attachment: fixed; } .d1 { height: 500px; background-color: tomato; } .d2 { height: 500px; background-color: steelblue; } .d3 { height: 500px; background-color: mediumorchid; } </style> </head> <body> <div class="d1"></div> <div class="box"></div> <div class="d2"></div> <div class="box"></div> <div class="d3"></div> </body> </html>
原文：https://www.cnblogs.com/zhouyongv5/p/10944663.html
