我要评论该内容将持续更新，会出现覆盖情况，直到更新完成
所以，前面的一些内容也会得到一些补充
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS.demo1</title>
<link rel="stylesheet" href="../CSS/demo1.css" type="text/css" /> <!--先加载CSS后HTML（链接外部样式）-->
<!-- <style type="text/css">
</style> -->
<!-- <style type="text/css">
先加载HTML后CSS,对页面性能有影响（导入外部样式）
@import url("./CSS/demo1.css");
</style> -->
</head>
<body>
<!-- <p style=""></p> -->
</body>
</html>
| 样式表 | 优点 | 缺点 | 作用范围 |
|---|---|---|---|
| 行内样式表 | 权重高 | 未实现样式和结构相分离 | 最用于一个标签 |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 最用于一个页面 |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 作用于一个站点 |
标签选择器——选择某一类标签
类选择器
在标签中设置class属性
CSS文件中–> .class_name{}
相同class可以使用多次
/* demo3.css */
html{
font-size: 100px;
font-weight: bold;
letter-spacing: -15px;
}
.G{
color: #4285f4;
}
.o1{
color: #ea4335;
}
.o2{
color: #fbbc05;
}
.g{
color: #4285F4;
}
.l{
color: #34a853;
}
.e{
color: #ea4335;
}
<!-- demo3 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google</title>
<link href="../CSS/demo3.css" type="text/css" rel="stylesheet" />
<link rel="icon" href="../img/study.png" />
</head>
<body>
<span class="G">G</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="e">e</span>
</body>
</html>
/* demo3.css */
.font100{
font-size: 100px;
font-weight: bold;
letter-spacing: -5px;
}
.G{
color: #4285f4;
}
.o1{
color: #ea4335;
}
.o2{
color: #fbbc05;
}
.g{
color: #4285F4;
}
.l{
color: #34a853;
}
.e{
color: #ea4335;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google</title>
<link href="../CSS/demo3.css" type="text/css" rel="stylesheet" />
<link rel="icon" href="../img/study.png" />
</head>
<body>
<span class="font100 G">G</span>
<span class="font100 o1">o</span>
<span class="font100 o2">o</span>
<span class="font100 g">g</span>
<span class="font100 l">l</span>
<span class="font100 e">e</span>
</body>
</html>
#id{}*{}父级 子级 …{}父级>子级{}p.hello{}（既是p标签又是hello类）span,div{}（span和div标签）a:link 未访问链接状态a:visited 访问过的链接状态a:hover 鼠标移动上去的链接状态a:active 点击时的链接状态| 样式 | 说明 | 属性 |
|---|---|---|
| font-size | 字体大小 | size |
| font-family | 字体(可以多种字体) | 字体英文名、unicode字体 |
| font-weight | 字体粗细 | normal、bold、100-900(整百) |
| font-style | 字体风格 | normal、italic |
综合语法: font: style weight size/line-height family
| 属性 | 表示 | 属性值 |
|---|---|---|
| color | 颜色 | color |
| line-height | 行高 | height |
| text-align | 水平对齐 | left、right、center |
| text-indent | 首行缩进(汉字一般是两个缩进) | …(1em=1个字大小) |
| text-decoration | 文本装饰 | none、underline、overline、line-through |
display:blockdisplay:inlinedisplay:inline-block| 属性 | 描述 | 属性值 |
|---|---|---|
| background-color | 背景颜色 | transparent、color |
| background-image | 背景图片(背景图片在背景颜色之上) | url(url) |
| background-repeat | 背景平铺 | repeat(默认)、no-repeat、repeat-x、repeat-y |
| background-position | 背景位置 | length||length(x坐标、y坐标)、position||position(top、center、bottom、left、center、right) |
| background-attachment | 背景附着(相对于滚动条来说，如果是滚动，随滚动条移动；如果是固定，不随滚动条移动) | scroll、fixed |
| background:rgba(r,g,b,a) | 背景透明，不会影响内容 | 0<=a<=1(支持.4=0.4的写法) |
background:顺序不严格要求(一般是 color url repeat attachment position)选择器相同，执行重叠性，就近原则
选择器不同，要计算权重(如果权重相同，就近原则)
| 选择器(一个元素) | 权重 |
|---|---|
| * | 0,0,0,0 |
| 标签选择器，伪元素 | 0,0,0,1 |
| 类选择器,伪类,属性选择器 | 0,0,1,0 |
| id选择器 | 0,1,0,0 |
| 行内样式 | 1,0,0,0 |
| !important | 无穷大 |
权重之间没有进位的
对于子代标签，对于一个CSS样式，如果没有选中子标签的，按照父标签的权重来计算；如果有选中子标签的，不管父类权重多大，看选中该标签的选择器的权重
| 0,0,0,0 |
| 标签选择器，伪元素 | 0,0,0,1 |
| 类选择器,伪类,属性选择器 | 0,0,1,0 |
| id选择器 | 0,1,0,0 |
| 行内样式 | 1,0,0,0 |
| !important | 无穷大 |
本文地址：https://blog.csdn.net/weixin_46005735/article/details/107326446
如对本文有疑问， 点击进行留言回复！！
Unity Android playerSetting相关设置
元素分类，块级元素，内联元素，行内块元素，displaby 属性
网友评论