CSS
一、CSS简介
1.1语法规范
整个CSS都遵循 选择器{ 声明1；声明2；}
为了html和CSS相互独立，利用< link rel="stylesheet" href="C:/Users/李佳昕/Desktop/HTML+CSS/1.css">链接CSS文件和HTML文件
1.2 Emmet语法
-
标签名+tab
-
生成多个相同的标签 eg： div*3+tab
-
生成父子级标签 eg： ul>li*3+tab
-
生成兄弟级标签 eg：div+span+tab
-
生成带类标签 用 .类名+tab eg：div.D1+tab
-
生成带id标签 用 #id名+tab eg：div#D1+tab
-
当类名，或者id名带有数字可自增 eg：div#$D*5--会生成5个div标签，id=D1...id=D5
1.3四种导入方式
-
行内样式
< h1 style="color:red" >我是标题 < /h1>
-
内部样式
在html页面中的head标签内写
< style>
h1{ color:yellow }
< /style>
-
外部样式
-
链接式：见文件开头
-
导入式：
在html页面中的head标签内写
< style>
@import url(....)
< /style>
优先级：行内最高，内部样式和外部样式遵循就近原则
-
1.4 行内元素、块元素、行内块元素的特性及转换
块元素：独占一行，可以设置高度、宽度
行内元素：一行可以放多个，不能设置高度、宽度
行内块元素：一行可以放多个，可以设置高度、宽度
转化：转为块：display：block
转为行：display：inline
转为行内块:display: block-inline
二、选择器
2.1基本选择器
2.1.1 标签选择器
标签选择器 会选择所有相同的标签
h1 {
color: brown;
--标签背景颜色
border-radius: 80px;--标签的棱角弧度
}
p {
color: yellowgreen; --字体颜色
font-size: 80px; --字体大小
}
2.1.2 类选择器
1）类选择器可以复用，只要引用相同的类名即可。还可以跨标签使用。
2）style里---- .类名{}
body里---给标签增加属性 class=“类名”
.first { color: brown;}
.second {color: aquamarine;}
<h1 class="first">我是一个标题</h1>
<p class="second">我是另一个p标题</p>
2.1.3 id选择器
1）style里-- #id名称{}
body里--给标签增加属性 id=“id名” id唯一，不可重复
2）当三个选择器同时出现时，id选择器>类选择器>标签选择器
#h11 { color: pink;}
<h1 class="first" id="h11">我是一个标题</h1> ---粉色
2.2高级选择器
2.2.1 层次选择器
-
后代选择器：在某个元素的后面。例如：祖爷爷--爷爷--爸爸--儿子
格式： 祖先标签 后代标签 { }
<style>
body p {background:pink} --表示body后边所有p都被选中
</style> -
子选择器：只有一代。例如：爷爷-爸爸，或者 爸爸-儿子
格式： 祖先标签 >后代标签 { }
<style>
body>p {
background-color: pink;
}
</style> -
相邻兄弟选择器:同辈之间，且只有一个，向下寻找。
格式： 自己+相邻兄弟类型标签 { }
<style>
.select+p { background-color: pink; } --选择select的相邻兄弟p标签
</style>
<p>p0</p>
<p class="select">p1</p> --p1为select类，p1的相邻兄弟是p2,要向下找，所以不是p0
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p7 class="select">p7</p7>--p7为select类，p7的相邻兄弟是p8
<p>p8</p> -
通用选择器：从自己往下找，所有的兄弟标签
格式： 自己~兄弟的类型标签 { }
<style>
.select~p { background-color: pink; } --选择select的相邻兄弟p标签
</style>
<p>p0</p>
<p class="select">p1</p> --p1为select类，p1的兄弟是p2,p3,p7,p8
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p7>p7</p7>
<p>p8</p>
2.2.2 结构伪类选择器
伪类：加一些判断，条件
例如：要选中 ul中的第一个li标签
<style>
ul li:first-child { background-color: pink; }
</style>
例如： 要选中 ul中的最后一个li标签
<style>
ul li:last-child {
}
</style>
例如：要选择当前标签的父标签的第二个子元素
<style>
p:nth-child(2) { }
<!-- p作为当前标签，找到他的父标签也就是body，body他的第二个子元素，并且该元素也得是p标签才生效.如果是定位到父元素的第一个子元素，我们可以看到是h标签，并不是p标签，则不生效 -->
</style>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>
<style>
p:nth-type(2) { }
<!-- p作为当前标签，找到他的父标签也就是body，body他的第二个同类型的子元素 -->
</style>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>
2.2.3超链接伪类
a:link :选择所有未被访问的链接
a:visited：选择已被访问过的链接
a:hover :当指针位于其上
a:active:鼠标按住位释放
必须按照上述顺序写
a {
text-decoration: none; /*使链接没有下划线*/
font-size: 14px;
color: black;/*更改连接颜色，默认蓝色，现在为黑色*/
}
a:hover {
color: orange; /*a:hover 表示鼠标位于其上时，颜色为橘色*/
text-decoration: underline;/*a:hover 表示鼠标位于其上时，文字有下划线*/
}
三、美化网页
3.1为什么要美化网页
有效传递信息、吸引用户、提高用户体验、突出主题
3.2字体属性
font-family: 字体
font-family: '仿宋', "黑体", 'Microsoft YaHei'; 电脑按顺序查找是否安装该字体，若安装第一个则显示第一个，如果没有则查找第二个
font-size:字体大小
font-weight:字体粗细
color：颜色
font-style:字体风格。斜体，正常。
复合属性写法：
font:font-style font-weight font-size font-family
顺序不可以变，用空格隔开，必须有font-size，font-family
<style>
.p1 { font: italic 700 16px '楷体' } </style>
3.3 文本属性
-
color: 文本颜色，
有三种表示方式 ：1、用英文 color：red；2、用十六进制数color：#ff0000；3、用rgb，color: rgb(0,255,345) ,或者 rgba（0，255，234，0.1），第四个数表示透明度
-
text-align：文本对齐方式，center，left，right
-
text-indxent:文本缩进,一般缩进两个字符 2em
-
text-decoration：文本装饰，上下划线overline,underline,去掉下划线none（常应用于给超链接去下划线）
-
line-height:行间距=字体大小+上下空隙。例如line-height=26px;(字体占16px，上下分别占5px)。
如何让文本垂直居中？让字体所在的标签垂直高度=行间距
3.4阴影
text-shadow: 阴影颜色，水平偏移距离，垂直偏移距离，阴影半径
3.5表单属性
list-style：列表样式。none表示没有前边的圆，circle表示空心圆，suqsre表示正方形，decimal表示数字。
ul li {
line-height: 30px;
list-style: none; /* 表单没有前边的原点 */
list-style: square;/* 表单前边的原点变为方块 */
text-indent: 2em;
}
3.6 背景图片及渐变
background-image:背景图片 默认平铺repeat
background-repeat:背景重复，分为：repeat-x水平平铺 和repeat-y 垂直平铺 和 no-repeat不重复
background-attachment: fixed;随文本滚动 background-position: 水平、垂直 cente、left、top 等 背景图片位置
复合写法：background : background-color background-image background-repeat background-attachment background-position;
渐变：
background: linear-gradient(339deg, #85FFBD 0%, #FFFB7D 100%);
四、盒子模型
4.1 什么是盒子模型
margin---外边距 padding---内边距 border---边框
盒子大小=margin+padding+border+内容大小
4.2 边框
边框的粗细width、边框的样式style、边框的颜色color
border: 1px solid(实线，dashed 虚线) red;
<!-- 常见规范,把内外边距都置零-->
h1,h2,ul,li,a,body{
margin: 0;
padding: 0;
text-decoration: none;
}
4.3 内外边距
padding：上、下、左、右
margin：上、下、左、右
外边距可以实现居中：margin：0（上下为0），auto（左右自动）
line-height = 盒子高度 也可以实现文字垂直居中
4.4 圆角边框
border-radius:左上 右上 右下 左下
border-radius: 50px 100px 150px 200px;
border-radius:50%; 当盒子是正方形的时候，50%为圆形
圆角矩形：border-radius：设置为盒子高度的一半
4.5盒子阴影
h-shadow:必写，水平阴影位置，可为负
v-shadow：必写，垂直阴影的位置，可为负
blur：模糊距离
spread：阴影的尺寸
color：阴影的颜色
inset：将外部阴影改为内部阴影
box-shadow: 10px 30px 20px 10px rgba(0, 0, 0, .3);
4.6 浮动
特性：
-
浮动元素会脱离标准流的控制，达到指定位置，不再保留原来的位置
-
如果多个盒子都设置了浮动，方向相同会紧贴，都会在同一行显示，顶端对齐
-
浮动元素具有行内块特性
float:方位词left、right、none
clean：both 清除浮动效果
4.7父级边框塌陷的问题
overflow：scroll(出现滚动条)/hidden(多余部分隐藏)
当图片超过盒子大小时使用overflow设置可视化
4.8定位
1.相对定位
相对定位任然在标准文档流中，原来的位置会被保留。
position: relative;/*相对于原来的位置定位，有上下左右四个*/
top: -20px;/*向上走20px, top：20px 或者 bottom: 20px; 可以实现往下20px*/
right: 20px;
2.绝对定位
定位：基于XXX定位
1.父级元素没有定位的情况下，相对于浏览器定位
2.假设父级元素存在定位，通常会相对于父级元素偏移
父级元素position：relative； 然后子标签在position：sbsolute；left：6px；
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，他不在标准文档流中，原来的位置会被保留
3.固定定位
不随浏览器上下而改变位置，常应用于回到顶部
position: fixed;
right: 0px;
bottom: 0px;
4.z-index
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
#content {
margin: 0px;
padding: 0px;
width: 300px;
border: 1px red solid;
overflow: hidden;
font-size: 12px;
line-height: 25px;
}
img {
width: 300px;
height: 300px;
}
ul,
li {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#content ul {
position: relative;
}
.tipText,
.tipBg {
position: absolute;
width: 380px;
height: 25px;
top: 180px
}
.tipText {
z-index: 999;
/* 要不然第二个li盖住了文字，得让文字浮现出来 给他设置最高层999 */
}
.tipBg {
background: rgb(214, 56, 56);
opacity: 0.5;
/* 背景透明度 */
}
</style>
</head>
<body>
<div id="content">
<ul>
<li><img src="img/1.jpg" alt="" </li>
<li class="tipText"> 努力是奇迹的别名</li>
<li class="tipBg"></li>
<li>时间：20200</li>
<li>地点：的发放</li>
</ul>
</div>
</body>
</html>
浙公网安备 33010602011771号