当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）
/*单行注释*/
/*
多行注释
*/
选择器 {属性：属性值;属性：属性值;属性:属性值;}
h1 {color:red;font-size:14px;}
1 head内style标签内部直接书写css代码
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
p {
background-color:red;
}
</title>
</head>
（背景框会展示出来）
2 link标签引入外部css文件
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
3 直接在标签内通过style属性书写css样式
<p style="color:red"> hello word.</p>
！！！ css样式通常都应该写在单独的css文件中
基本选择器
标签选择器
id选择器
类选择器
通用选择器
组合选择器
后代选择器
二字选择器
毗邻选择器
弟弟选择器
属性选择器
伪类选择器
伪元素选择器
基本选择器
<style>
span {color:red;}
<style>
<style> #s1 {font-size: 24px;} <style>
.c1 {color: #43ceff
}
* { color: #ff100c
}
如果是一个类选择器 和一个通用选择器的话 会出现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 {color: #43ceff } * { color: #ff100c } </style> </head> <body> <span id="s1">span</span> <div class="c1">div <p>p <span>span</span> </p> </div> <div class="c1">div</div> </body> </html>
这是下面相同选择器 级别不同 类的优先级权重 高于 通用的 类先把所有的类自己的包括内部的和继承的改为类选择器颜色
后面 按照从上往下的执行顺序的时候 通用选择器在把 所有没有选择器的标签颜色改为通用的颜色
组合选择器
<style>
div span {
color: blue;
}
</style>
<style> div>span { color: red; } </style>
<style> div+span { color: blue; } </style>
<style> div~span {color: deeppink} </style>
属性选择器
<style>
[xxx] {color: red}
</style>
<style> [xxx=‘1‘] {color: blue} </style>
<style>
/*规定p标签里面内部必须有属性名为xxx 并且值为2的标签*/
p[xxx=‘2‘] {color: green;}
</style>
分组与嵌套
<style>
div {color: red;}
p {color: red;}
span {
color: red;}
</style>
<style>
/*分组*/
div,p,span {color: red}
</style>
<style>
/*嵌套：不同的选择器可以使用同一个样式
后代选择器与标签组合使用
*/
div p,span {color: yellow}
</style>
伪类选择器
<style>
/*未点击时*/
a:link {
color: red;
text-decoration:None;
}
/*鼠标悬浮上面*/
a:hover {
color: yellow;
}
/*点击时*/
a:active {
color: black;
}
/*点击后返回*/
a:visited {
color: green;
}
</style>
补充：input:focus{ /*input输入框获取焦点时样式*/
background-color:red;} 文本框输入的时候可以显示文本框的背景颜色
text-decoration: None; 连接下划线去掉
伪元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*首字母大写 并且设置颜色红色*/ p:first-letter { color: red; font-size: 24px; } /*在p标签前面加上内容*/ p:before{ content: ‘这是添加的内容‘; color: orangered; } /*这是标签后面添加的内容*/ p:after{ content: ‘这是后面添加的‘; color: orange; font-size: 48px; } </style> </head> <body> <p>继承是css的一个主要特征，它是依赖于组向圣诞节放假快乐</p> <p>继承是css的一个主要特征，它是依赖于组向圣诞节放假快乐</p> <p>继承是css的一个主要特征，它是依赖于组向圣诞节放假快乐</p> </body> </html>
id 用来唯一标识标签 class 标签类属性（*****）,可以由多个值 可以理解成python面向对象的继承
<style>
p[xxx=‘2‘] {color:red;}
</style>
<p xxx=‘2‘>ppp</p>
相同选择器 不用的引入方式 就近原则 谁越靠近标签谁说了算
不同选择器 相同的引入方式
行内样式 > id 选择器 > 类选择器 > 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器*/
#p1 {color: green;}
/*类选择器*/
.c1 {color: aqua;}
/*标签选择器*/
p {color: red;}
</style>
<!--标签选择器-->
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id="p1" class="c1" style="color: blue">p</p>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div {width: 400px; height: 100px;} p {font-size: 16px; font-weight: bolder;} </style> </head> <body> <div>div</div> <div>div</div> <p>坚实的科技了解了解</p> </body> </html>
font-weight用来设置字体的自重（粗细）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*color: orange;*/ /*color: rgb(0,0,255)*/ /*color:#ff100c;*/ /*最后一个参数控制的是透明度*/ color: rgba(0,0,234,0.3); } </style> </head> <body> <p>这是文本颜色修改的</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*把p标签内容 右对齐 */ /*text-align: right;*/ /*text-align: center;*/ /*text-align: left;*/ /*把p标签内容下面加上下划线*/ text-decoration: underline; /*把p标签内容上面加一条下划线*/ /*text-decoration: overline;*/ /*p标签内容有一条横线 和作废一段话一样*/ /*text-decoration: line-through;*/ /*把p标签内容缩进48px像素位置*/ text-indent: 48px; } /*连接下划线去掉*/ a {text-decoration: none} </style> </head> <body> <p>以把多个字体名称作为</p> <a href="https://www.baidu.com">百度</a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; /*背景颜色*/ /*background-color: orange;*/ /*background-image: url("1.png");*/ /*!*不重复*!*/ /*background-repeat: no-repeat;*/ /*!*位置 left左面居中对齐 *!*/ /*background-position: center;*/ /*支持简写*/ background: no-repeat center url("1.png") orange; } </style> </head> <body> <div></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height: 400px; background-color: tomato; } .box { height: 400px; background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg"); /*背景附件 固定的*/ background-attachment: fixed; /*可以只填充一个不重复的图片 且 图片周围有背景色 支持滑动*/ /*height: 400px;*/ /*background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");*/ /*background-color: orange;*/ /*background-repeat: no-repeat;*/ /*background-position: center;*/ /*background-attachment: fixed;*/ } .c2 { height: 400px; background-color: red; } .box1 { height: 400px; background: url("jie.jpg"); background-position: center; /*背景附件 固定的*/ background-attachment: fixed; } .c3 { height: 400px; background-color: fuchsia; } </style> </head> <body> <div class="c1"></div> <div class="box"></div> <div class="c2"></div> <div class="box1"></div> <div class="c3"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { border: 3px solid red; /*border-width: 3px;*/ /*!*dashed虚线*!*/ /*border-style: dashed;*/ /*border-color: deeppink;*/ } </style> </head> <body> <div>div</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: red; /*边框颜色 实线 3px*/ border: 3px solid black; /*半径是边缘的50%*/ border-radius: 50%; } </style> </head> <body> <div></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div {*/ /*!*将div标签内容隐藏起来 让出来位置*!*/ /*display: none;*/ /*}*/ /*div {*/ /*!*inline将款及标签变成行内标签*!*/ /*display: inline;*/ /*}*/ /*span {*/ /*!*block 块 将行内标签变成 块级标签*!*/ /*display: block;*/ /*}*/ span { /*将选择的标签即具有行内标签特点又有块级标签的特点*/ display: inline-block; height: 400px; width: 400px; background-color: red; border: 3px solid black; } </style> </head> <body> <div>div</div> <div>div</div> <span>span</span> <span>span</span> </body> </html>
原文：https://www.cnblogs.com/lakei/p/10946279.html