一、什么是CSS
CSS 指层叠样式表 (Cascading Style Sheets)，在编写网页中，样式是用来让html元素如何显示的，而样式是存在样式表中，作用是为将内容与表现进行分离，使其操作更加清晰。CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
二、CSS创建
插入样式表的方法有三种:内联样式Inline style、内部样式表Internal style sheet、外部样式表External style sheet
内联样式
因为要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。不推荐使用，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
<font style="color: blue;font-size: 50px;font-family: 黑体;">这是一些字体</font>内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在<head></head>中定义内部样式
<style>
span {
font-size: 65px;color: chartreuse;
}
</style>外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。 标签在（文档的）头部：
<link rel="stylesheet" type="text/css" href="mystyle.css">三、CSS选择器
id 和 class 选择器
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。
- -id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
- -class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
四、CSS高级选择器
* {
font-size:65px; color:green;
}<div>DIV标签</div>
<span>SPAN标签</span> <br/>
<font>FONT标签</font> <br/>
<p>P标签</p>
<label>label标签</label> <br/><span>SPAN_1</span> <br/>
<p>
<span>SPAN_2</span>
<label>
<span>SPAN_3</span>
</label>
</p><span>SPAN_1</span> <br/>
<p>
<span>SPAN_2</span> <br/>
<label>
<span>SPAN_3</span>
</label> <br/>
<span>SPAN_4</span>
</p>五、CSS-伪类选择器
- -超级链接
可以根据元素的状态来设置样式。
link: 未被访问过。
visited: 已经访问过。
hover: 在鼠标经过时, 会触发。
active: 当鼠标按下时, 松开前的样式。
- -其他
:focus 对象成为输入焦点时的样式
:first-child 对象的第一个子对象的样式
- -伪元素
| p::after | 在每个 元素之后插入内容。 | |
| p::before | 在每个 元素之前插入内容。 | |
| p::first-letter | 选择每个 元素的首字母。 | |
| p::first-line | 选择每个 元素的首行。 | |
| p::selection | 选择用户选择的元素部分 |
六、CSS-样式重叠及权重
- -多重样式【执行顺序】
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。例如，外部样式表拥有针对 h3 选择器的三个属性：
h3
{
color:red;
text-align:left;
font-size:8pt;
}而内部样式表拥有针对 h3 选择器的两个属性：
h3
{
text-align:right;
font-size:20pt;
}--权重计算方式：
第一等：内联样式，如：权值为1000.
第二等：ID选择器，如：#header，权值为100.
第三等：类、伪类、属性选择器如：.class， 权值为10.
第四等：标签、伪元素选择器，如：div ::first-line 权值为1.
--css样式选择哪个主要就是看权重值，权重值高则先选中，当权重值一样时，则按先后顺序
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式重叠及权重</title>
<!-- 页面解析是从上到下 -->
<!-- 外部样式 -->
<link rel="stylesheet" href="./style.css">
<!-- 内部样式 -->
<style>
h3 {
background-color: red;
font-size: 15px;
}
/* 权重的叠加 100+10=110 */
#div1 .h3_class {
background-color: blue;
font-size: 65px;
}
#h3_1 {
font-size: 45px;
}
/* 权重值10 */
.h3_class {
background-color: rgb(13, 216, 30);
}
/* 权重值10 */
.h3_class:hover {
background-color: rgb(238, 157, 8);
}
/* 权重值1 */
h3:hover {
background-color: rgb(238, 8, 8);
}
</style>
<!-- 1、外部样式和内部样式看解析顺序 -->
<!-- 2、权重【优先级】 -->
<!-- 3、内联样式权重值最高 -->
</head>
<body>
<!-- style="background-color: green;" -->
<h3 id="h3_1">这是内容</h3>
<div id="div1">
<h3 class="h3_class" >这是div-h3内容</h3>
</div>
<h3 class="h3_class">这是内容2</h3>
<h3 class="h3_class" title="h3_2">这是内容3</h3>
</body>
</html>七、CSS-字体样式
- -字体样式
font-size:35px;
color:blue;
font-weight:bold; /* normal */
font-family:黑体, 微软雅黑;
font-style:italic;
- -文本样式
text-align:center; 文本居中
text-indent:25px; 文本缩进
text-decoration:underline; 文本装饰
line-height:105px; 设置行高
八、CSS-列表样式
<style>
div {
width: 200px;
background-color: red;
/* text-align: center; */
text-indent: 40px;/*文字缩进*/
text-decoration: underline;/*文字下划线*/
}
ul {
/* disc：实心圆 circle：空心圆 square：实心方块 decimal：阿拉伯数字 none：不使用项目符号 */
list-style: none;
}
/* 针对li设置背景图 */
#li1 {
list-style-image: url('./01.jpg');
}
#li2 {
list-style-image: url('./02.jpg');
}
#li3 {
list-style-image: url('./03.jpg');
}
#li4 {
list-style-image: url('./04.jpg');
}
</style>
</head>
<body>
<div>
这是内容
</div>
<!-- 有序和无序列表 -->
<ul>
<li id="li1">清风阁</li>
<li id="li2">烟雨楼</li>
<li id="li3">望江楼</li>
<li id="li4">赏月台</li>
</ul>
</body>九、CSS 背景
CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
- background-color 设置元素的背景颜色。
- background-image 把图像设置为背景。
- background-repeat 设置背景图像是否及如何重复。
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
- background-position 设置背景图像的起始位置。
- -背景颜色
ackground-color 属性定义了元素的背景颜色.
CSS中，颜色值通常以以下方式定义:
- 十六进制 - 如："#ff0000"
- RGB - 如："rgb(255,0,0)"
- 颜色名称 - 如："red"
- -背景图像
background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
- -背景图像 - 水平或垂直平铺
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调
- -背景图像- 设置定位与不平铺
background-repeat:no-repeat;
background-position:left top; 【左边、顶部】
十、CSS-表格样式
线型:
solid 实心线
dotted 点状线
dashed 虚线
hidden 隐藏
none 不存在
border:5px solid #000;
border-left: 5px solid #000;
border-right: 10px dashed red;
border-top: 10px dotted blue;
十一、CSS-颜色
颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。
(1) 使用颜色名。
如: green, yellow ...
(2) 色值表示法 (RGB)
red, green, blue
7E EC 59 (十六进表示)
#7EEC59 (6位十六进)
(3) 如果不想转十六进,
可以用 rgb 函数来表示。
rgb( ??, ??, ?? ); [十进制表示法]
比如：红色
#FF0000 rgb(255,0,0)
十二、CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
我们通过在浏览器按F12去参考computed
十三、CSS 定位机制
在页面实现对HTML元素定位
- -static：遵循对象流，不可以被top，right，bottom，left这4个定位偏移属性进行偏移
static：
对象遵循常规流。此时4个定位偏移属性不会被应用。
relative：
对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
absolute：
对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
fixed：
与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
/* 设置定位 相对定位 静态定位、绝对定位、灵活定位 */ /* relative 会受到方位的影响 遵循常规流的操作（div的空间存在） 相对0,0定位-不会跟着滚动条调整 */ /* static 不会受到方位的影响 */ /* absolute 会受到方位的影响 不遵循常规流的操作（div的空间不存在）*/ /* fixed 会受到方位的影响 不遵循常规流的操作（div的空间不存在）相对窗口定位-可以跟着滚动条调整*/
十四、CSS 元素的浮动
folat 使得元素进行上浮 left right none
上浮会影响原空间（使得原来的空间失效，不计算原空间）
上浮：块级元素变成行内元素
行内元素还是行内元素
元素的上浮也会影响父元素
涉及元素的延展 父元素会受到子元素的影响 当子元素div2上浮失去原空间，则父元素也失去高度
关于CSS 元素浮动的清除
所谓的清除浮动：
清除的是由于上浮元素造成的空间失效，clear后使得原来的空间恢复正常
none：
允许两边都可以有浮动对象
both：
不允许有浮动对象
left：
不允许左边有浮动对象
right：
不允许右边有浮动对象
十五、CSS display属性
将某个对象视为什么类型的元素框
隐藏对象：none
块级元素：block
内联元素：inline 【不会受到宽度和高度影响】
行内块：inline-block【会受到宽度和高度影响】
练习:
可以搜索一个小说网站，按F12然后去参考并实现一个属于自己的小说网站
扫一扫
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
