标签：css基础 式表 规范 pre 一个 lan 交集 style 表示
特点 ：在具体的标签中使用style属性，引入CSS样式代码
语法：
常见的CSS属性
设置字体大小：
1.属性:font-size
2.取值 以像素为单位的数值，浏览器默认的字体大小是 16px
设置字体颜色:
1.属性：color
2.取值：颜色的英文单词或RGM(数值,数值,数值)或#b0b0b0（十六进制）
设置背景颜色
<!--行内样式-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="background: red;color:RGB(123,145,164);font-size: 19px;">asd</p>
</body>
</html>特点：将CSS代码与具体的标签相分离，在HTML文档中使用标签引入CSS代码。
语法：
<style>
选择器1
选择器2
选择器3
...
</style>选择器：
1.使用文档内嵌方式引入CSS样式表时，实现了结构与样式相分离，但是需要自己定义选择器来匹配文档中元素，为其应用样式。
2.作用 ： 匹配文档元素为其应用样式。
3.语法：选择器实际上由两部分组成
选择器（符）{
属性 ：值；
属性 ：值；
}
et :
标签选择器/元素选择器：
使用标签名作为选择符，匹配文档中所有的该标签，并应用样式
p {
color :green;
font-size :20px;
}允许为元素定义多个样式，共同起作用。
p{
color:red;
background-color:blue;
}特点：将标签名作为选择符，来匹配文档中所有的该标签，包含后代元素
语法：
标签名{
属性：值
}
标签名如a,divtext-decoration : none;取消下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: #aaffff;
font-size:20px;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<div>这是标签</div>
<a href="">点一下</a>
</body>
</html>特点：通过元素的class属性值进行匹配
语法：
.cl{
样式
}
<p class="cl">p文本</p>
以英文.开头，跟上class属性值，中间没有空格创建文件 class-selector
创建几个元素 div p span h1
使用类选择器为上述元素添加样式
1. 文本大小为24px
2. 背景颜色为橘色
3. 文本斜体显示 font-style : italic;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cl{
font-size:24px;
background-color: orange;
font-style:italic;
}
</style>
</head>
<body>
<div>这是标签</div>
<p class="cl">p文本</p>
</body>
</html>id 作用：HTML中所有的元素都有一个id属性，主要用来表示该元素在文档中的标志，具有唯一性。
id 选择器：通过元素的id属性值进行匹配
语法：
属性值{
样式
}注意：通常网页中外围的结构化标签，都使用id进行标识，具有唯一性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#seq{
width:100%;
height:50px;
background-color: pink;
}
</style>
</head>
<body>
<span id="seq">这是一个span文本</span>
</body>
</html>作用：为多个选择器设置共同的样式。
语法：
选择器1，选择器2，选择器3{
样式
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,h1,p{
background-color: gray;
margin:0;<!--外边距为0-->
}
</style>
</head>
<body>
<h1>标题1</h1>
<div>div</div>
<p>p</p>
</body>
</html>作用：依托于元素的后代关系来匹配元素（既包含直接子元素，也包含后代元素）。
语法：
选择器1 选择器2{
样式
｝在选择器1对应的元素中匹配后代元素，后代元素需满足选择器2。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nav span{
border-radius:2px;
background-color:RGB(204,204,204);
padding-left:10px;
}
</style>
</head>
<body>
<p id="nav">
<span>你好</span>
<span>
<span>在那里</span>
</span>
<span>再见</span>
</p>
</body>
</html>作用：依托元素的子代关系进行匹配，只匹配直接子元素。
语法：
选择器1>选择器2 {
｝<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nav>ul>li{
color:red;
}
</style>
</head>
<body>
<div id ="nav">
<ul>
<li>你好</li>
<li>你好<span>good<span>good</span></span></li>
</ul>
</div>
</body>
</html>分类：
作用 ：
主要是针对元素的不同状态去设置样式
超链接的不同状态
其他元素具备
表单控件
伪类选择器需要与其他选择器结合使用，设置元素在不同状态下的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{
color: #8e3fff;
text-decoration:none;
}
a:hover{
color: #ff45aa;
text-decoration:none;
}
a:visited{
color: greenyellow;
text-decoration:none;
}
a:active{
color:blue;
text-decoration:none;
}
</style>
</head>
<body>
<a href="#">哈哈</a>
</body>
</html>注意：如果要给超链接添加四种状态下的样式，必须按照以下顺序书写伪类选择器
:link
:visited
:hover
:active
简称 “爱恨原则 LoVe / HAte ”通过元素的tpye实现CSS。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type="text"]{
background-color: red;
}
</style>
</head>
<body>
<input type="text">
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*在p标签前添加元素*/
p::before{
content:"抽烟";
}
/*在p标签后添加元素*/
p::after{
content:"烫头";
}
</style>
</head>
<body>
<p>喝酒</p>
</body>
</html>
#设置文本第一个字符
#通过伪元素添加内部为行内元素当多个选择器的样式同时应用到一个元素上时，要按照不同选择器的优先级来应用样式。
div{
color:red;
}
#box{
color:green;
}
.c1{
color:blue;
}
<div id="box" class="c1">文本</div>判断选择器的优先级，主要看选择器的权重（权值）数值越大，优先级越高。
选择器 权值
标签选择器 1
类选择器/伪类 10
id选择器 100
行内样式 1000如果是复杂的选择器 （后代，子代），选择器最终的权值是各选择器权值之和
权重比较: ? ? ?
1.数选择器数量： id 类 标签 谁大它的优先级越高，如果一样大，后面的会覆盖掉前面的属性 ? ? ?
2.选中的标签的属性优先级用于大于继承来的属性，它们是没有可比性 ? ?
3.同是继承来的属性 ? ? ? ? ?
3.1 谁描述的近，谁的优先级越高 ? ? ? ? ?
3.2 描述的一样近，这个时候才回归到数选择器的数1.div和span标签在网页中的作用？
div将网站分割成独立的逻辑区域division分割
span:小区域标签，在不影响文本正常显示的情况下，单独设置对应的样式。
<style>
span.active{
font-weight:bold;
}
</style>
<p>
<span>内容</span>
</p>2.CSS基础选择器和高级选择器有哪些？
- 基础选择器
- 类选择器
- 标签选择器
- id选择器
- 高级选择器
- 后代选择器
- 子代选择器
- 组合选择器
- 交集选择器
- 伪装选择器 （link visited hover active）
- 伪元素选择器3.盒子模型的属性有哪些？并说明属性的含义，画出盒子模型图？
- width:内容宽度
- height:内容的高度
- border:边框
- padding:内边距
- margin:外边距4.如何让文本垂直和水平居中?
<style>
div{
width:200px;
height:60px;
text-align:center;
line-height:60px;
}
</style>
<div>
wusir
</div>
让行高等于盒模型的高度实现垂直居中
使用text-align:center;实现文本水平居中5.如何清除a标签的下划线？
text-decoration:none;
none:无线，underline:下划线,overline:上划线,line-through:删除线.6.如何重置网页样式？
html,body,p,ul,ol{
margin: 0;
padding: 0;
}
/*通配符选择器 */
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
input,textarea{
border: none;
outline: none;
}7.如何清除input和textarea标签的默认边框和外线？
border:0;
outline:0;8.在css中哪些属性是可以继承下来的？
1.字体系列属性：
font-family:字体系列
font-weight:字体的粗细
font-size:字体的大小
fnot-style:字体的风格
2.文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:单词之间的间距
letter-spacing:中文或者字母之间的间距
text-transform:控制文本大小
color:文本颜色
3.元素可见性
visibility:控制元素显示隐藏
4.列表布局属性
list-style列表风格，包括list-style-type,list-style-image
5.光标属性：
cursor:光标显示为何种形态
color,text-xxx,font-xxx,line-height,letter-spacing,word-spacing9.如何正确比较css中的权重？
如果选中了标签
数选择器的数量 id class 标签 谁大优先级越高 如果一样大，后面优先级越大
如果没有选中标签，当前属性是被继承下来，他们的权重为0，与选中的标签没有可比性
都是继承来的，谁描述的近，就显示谁的属性（就近（选中的标签越近）原则），如果描述的一样近，继续数选择器的数量。
!important 它设置当前属性的权重为无限大，大不过行内样式的优先级10.块级标签和行内标签?
块级标签:
1.可以设置高度，如果不设置宽度，默认是父标签的100%的宽度
2.独占一行
p
div
ul
ol
li
h1~h6
table
tr
form
行内标签：
1.不可以设置宽高
2.在一行内显示
a
span
b
strong
em
i
行内块标签
1.可以设置宽高
2.在一行内显示
input
img标签：css基础 式表 规范 pre 一个 lan 交集 style 表示
原文地址：https://www.cnblogs.com/xujunkai/p/10993015.html
