css
美化页面
书写类型
- 行内式: 只作用当前元素,对其他元素无效果
<p style="color: red;">文本内容</p>
- 内嵌式: 只作用当前html页面,可对当前页面元素复用
/* 写在head标签里 */
<style>
p {
color: red;
}
</style>
- 外联式: 可对整个项目复用
/* 在head标签下引入,index.css为外部样式表 */
<link rel="stylesheet" type="text/css" href="index.css">
语法结构
选择器 {属性: 值; 属性: 值; ...} // 用分号
常用样式属性设置
完整属性推荐看w3school: https://www.w3school.com.cn/css/css_list.asp
div {
width: 100px; // 宽
height: 100px; // 高
line-height: 100px; // 行高
background-color: #fff; // 背景色设置
background-image: url(); // 背景图片
background-size: 100% 100%; // 背景图片大小
text-align: center; // 文字居中显示 left, right
font-size: 16px; // 字体大小
font-family: 微软雅黑; // 字体
font-style: normal; //italic 斜体
font-weight: bold; //加粗,默认 normal
color: #000; // 文字颜色
opacity: 0.4; //透明度
margin: 10px 20px; //外间距 margin-top/margi-bottom/margin-left/margin-right
padding: 10px; //内边距 也可设置四个方向,同margin
float: left; //浮动
visibility: none; //可见
position: relative | absolute | fixed; //定位
left: 20px; // 同position配合使用
bottom: 10px; // 同上
}
选择器
- 标签选择器:
标签名 {}
- 类选择器:
.类名 {}
- ID选择器:
#ID名 {}
- 通配符选择器:
* {}
对页面所有元素起作用 - 后代选择器:
父元素 子元素 {}
- 并集选择器:
元素1, 元素2 {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
// 标签选择器
p {
color: red;
font-size: 16px;
}
// 类选择器
.p1 {
color: blue;
font-size: 16px;
}
// ID选择器
#p1 {
color: blue;
font-size: 16px;
}
// 通配符选择器
* {
color: #fff;
}
// 后代选择器,对div下的p标签起作用
div p {
color: #fff;
}
// 对类名为p1和类名为p2的起作用
.p1, .p2 {
color: #fff;
}
</style>
</head>
<body>
<div>
<p>我是标签选择器</p>
<p class="p1">我是类选择器</p>
<p class="p2">我是类选择器</p>
<p id="p1">我是ID选择器</p>
</div>
</body>
</html>
伪类
a:link {
...
}
a:hover {
//常用
}
a:visited {}
a:active {}
input:focus {}
标签分类
- 块级元素: div p ul li h
- 独占一行
- 默认有宽度,默认宽度为父元素的宽度
- 可以设置宽和高
- 行内元素: span a strong
- 所有行内元素在一行显示
- 不能直接设置宽和高
- 行内块元素: img input
- 元素在一行显示
- 可以设置宽和高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
background-color: red;
}
span {
background-color: blue;
}
</style>
</head>
<body>
<div>我自己占一行</div>
<input type="text" value="111">
<input type="text" value="2222">
<span>aaaa</span>
<span>22222</span>
<span>33333</span>
</body>
</html>
<style>
div {
background-color: red;
width: 100px;
}
input {
width: 300px;
}
span {
background-color: blue;
width: 100px;
}
</style>
类型转换
三种类型可以互相转换,block: 块级元素, inline-block: 行内块yuansu, inline: 行内元素
display: block | inline-block | inline
注意
- 样式设置有权重: !important > 行内样式 > ID选择器 > 类选择器 > 标签选择器
- 同一个标签权重相同,设置样式冲突,后面会覆盖前面的
- 子元素会继承父元素部分属性:line-height,color,font-size,
- !important,当某元素设置样式优先级更高时,但不想被覆盖,在后面加important,例如:
color: red !important;
- 玄同学只是把常用的列了出来,还有很多,需要同学们自己慢慢探索~关注 玄同学 公众号,学习html。