1. 前言
1.1 参考来源：https://www.cnblogs.com/liwenzhou/p/7999532.html
2. 正文
2.1 CSS语法
选择器 {属性1:值1;属性2:值2;}
2.2 CSS导入方式
- 行内样式 --> 把css样式写到标签的style属性里
- 在head标签中写style标签
将样式写在单独的css文件中，通过link标签的href属性导入（项目中多用这种）
3种CSS引用方式.png
2.3 CSS选择器 ***** jQuery选择器类似
- 基本选择器
- ID选择器 --> HTML标签都有唯一的ID
- 类选择器 --> HTML标签可以设置class属性
- 标签选择器 --> 大范围使用
通用选择器 *
4种基本的选择器使用示意.png
- 组合选择器
- div p 后代选择器
- div>p 儿子选择器
- div+p 毗邻选择器
- div~p 弟弟选择器
- 属性选择器
- div[s14] ：找到有s14这个属性的div标签
- input[type='email'] 找到type是email的input标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<style>
/*后代选择器*/
div span {color: red}
#d1 span {color: red}
/*儿子选择器*/
#d2>span {color: red}
/*毗邻选择器 往下找*/
p+span {color: red}
/*弟弟选择器*/
p~span {color: yellow}
/*属性选择器*/
/*找到有s14属性的标签*/
div[s14] {color: red}
input[type='text'] {border: 1px solid red}
/*组合选择器*/
p>span,
p+span {color: red}
/*找d1后代有c1样式的span标签*/
#d1 span.c1 {color: red}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<span>span1</span>
<p class="c1">
<span class="c1">span2</span>
</p>
</div>
</div>
<span>p标签上面的span</span>
<p>外层的p</p>
<span>外面的span</span>
<hr>
<span>p标签下面的下面的span</span>
<hr>
<div s14="good">div</div>
<div s14="excellent">div</div>
<input type="text">
<input type="password">
</body>
</html>
- 分组和嵌套
- div, p {}
- div.c1 {}
- 伪类和伪元素
- :hover --> 鼠标移动到标签上时应用的样式
- :focus --> input标签获取焦点时应用的样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<style>
a:link {color: red}
a:visited {color: blueviolet}
a:active {color: yellow}
#d1:hover {color: green}
input:focus {
outline: none;
border: 1px solid deeppink;
}
/*伪元素*/
p:first-letter {color: red}
p:before {
content: "*";
color: red;
}
p:after {
content: "[*]";
color: blue;
}
</style>
</head>
<body>
<a href="http://www.abcBakery.com">abcBakery</a>
<a href="http://www.baidutieba.com">百度贴吧</a>
<span id="d1">span</span>
<hr>
<input type="text">
<hr>
<p>为了谁你是谁</p>
<p>为了谁你是谁</p>
</body>
</html>
- 伪元素选择器
- p:before { --> 在P标签内部的最前面追加一个内容
content: "*";
color: red;
}- p:after { --> 在P标签内部的最后面追加一个内容
}- 清除浮动：
.clearfix:after{
content: "";
clear: both;
display: block;
}
2.4 CSS选择器的优先级 *****
- 选择器相同（样式名一样的话）
下面的优先级越高，覆盖（类似 变量覆盖 最后加载的那个样式生效）- 选择器不同（样式名不一样）
不同的选择器的优先级不一样（根据 权重计算）
内联样式(1000)>ID选择器(100)>类选择器(10)>元素选择器(1)>继承(0)
- 不讲道理的
!important
2.5 CSS的属性
- 高和宽
只有块儿级标签才能设置宽和高
- 字体属性（文字属性相关）
- 用什么字体：font-family: "字体1", "字体2",
- 字体大小：font-size
- 字体粗细：font-weight
- 字体颜色：color（英文 red；16进制代码 #FF0000； RGB、rgb(255, 0, 0)；rgba(255, 0, 0, 0.4)）
- 文字装饰效果：text-decoration: none/under-line/over-line/line-through
- 文字对齐：水平text-align: center；单行垂直：line-height=父标签的高度
- 文字缩进
- 背景色：background
- 滑动页面，但背景不动：background-attachment: fixed;
CSS盒子模型：
内容-->padding-->border-->margin
盒子模型
- 浮动
float: left/right
浮动的副作用
- 定位
- 相对定位 position: relative; --> 相对自己原来在的位置做定位
- 绝对定位 position: absolute; --> 相对自己已经定位过的祖先标签
- 固定定位 position: fixed; --> 相对于屏幕做定位
- 溢出：overflow: hidden/scroll/auto
- 边框属性
- border: 1px solid red;
border-radius: 50%
边框属性
- display
- block
- inline
- inline-block
- none
z-index 设置对象的层叠顺序
z-index
opacity 定义透明效果
opacity
网友评论