day 42 css 样式
s://www.cnblogs.com/liwenzhou/p/7999532.html
1. CSS语法
选择器 {属性1：值1;...;}
2. CSS导入方式
1. 行内样式-->把css样式写到标签的style属性里
2. style标签中定义
3. 写在单独的css文件中，通过link标签导入
3. CSS选择器
1. 基本选择器
1. ID选择器 --> HTML标签都有唯一的ID
2. 类选择器 --> HTML标签可以设置class属性
3. 标签选择器 --> 大范围使用
4. 通用选择器 *
2. 组合选择器
1. div p 后代选择器
2. div>p 儿子选择器
3. div+p 毗邻选择器
4. div~p 弟弟选择器
3. 分组和嵌套（全班都没想起来的）
div, p {}
div.c1 {}
4. 属性选择器
1. div[s14] 找到有s14这个属性的div标签
2. input[type='email'] 找到type是email的input标签
5. 伪类选择器
1. :hover --> 鼠标移动到标签上时应用的样式
2. :focus --> input标签获取焦点时应用的样式
选择器 {属性1：值1;...;}
2. CSS导入方式
1. 行内样式-->把css样式写到标签的style属性里
2. style标签中定义
3. 写在单独的css文件中，通过link标签导入
3. CSS选择器
1. 基本选择器
1. ID选择器 --> HTML标签都有唯一的ID
2. 类选择器 --> HTML标签可以设置class属性
3. 标签选择器 --> 大范围使用
4. 通用选择器 *
2. 组合选择器
1. div p 后代选择器
2. div>p 儿子选择器
3. div+p 毗邻选择器
4. div~p 弟弟选择器
3. 分组和嵌套（全班都没想起来的）
div, p {}
div.c1 {}
4. 属性选择器
1. div[s14] 找到有s14这个属性的div标签
2. input[type='email'] 找到type是email的input标签
5. 伪类选择器
1. :hover --> 鼠标移动到标签上时应用的样式
2. :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: darkseagreen}
a:visited{color:saddlebrown}
/*重点 :鼠标移动到连接上*/
#11:hover{color:red}
a:active{color:yellow}
input:focus{
outline: none;
border: 5px solid deeppink
}
/*伪元素选择器*/
p:first-letter{font-size: 32px;
color: pink}
</style>
</head>
<body>
<a id="11" href="http://www.abc.com">abc</a>
<a href="http://www.luffycity.com">路飞学城</a>
<hr>
<input type="text">
<hr>
<p>带你去浪漫的土耳其,一起到上帝去做面试题.</p>
<p>带你去浪漫的土耳其,一起到上帝去做面试题.</p>
<p>带你去浪漫的土耳其,一起到上帝去做面试题.</p>
<p>带你去浪漫的土耳其,一起到上帝去做面试题.</p>
</body>
</html>
6. 伪元素选择器
p:before { --> 在P标签内部的最前面追加一个内容content: "*";
color: red;
}
p:after { --> 在P标签内部的最后面追加一个内容
}
清除浮动：
.clearfix:after{
content: "";
clear: both;
display: block;
}
4. CSS选择器的优先级
1. 样式名一样的话
类似 变量覆盖 最后加载的那个样式生效
2. 样式名不一样
根据 权重计算
内联样式(1000)>ID选择器(100)>类选择器(10)>元素选择器(1)>继承(0)
3. 不讲道理的
!important
5. CSS属性
1. 文字属性相关
1. font-family: "字体1", "字体2",
2. font-size 字体大小
3. font-weight 字体粗细
4. color 字体颜色
1. 英文的颜色名 red
2. 16进制颜色代码 #FF0000
3. RGB rgb(255, 0, 0)
4. rgba(255, 0, 0, 0.4)
2. 宽和高
1. width 宽
2. height 高
只有块儿级标签设置宽和高才有效
3. 背景
background
background-color: red
background-image: url(...)
4. 文本样式
1. 水平居中
text-align: center
2. 单行文本的垂直居中
line-height=父标签的高度
3. 文本装饰线
text-decoration: none/under-line/over-line/line-through
5. CSS盒子模型
内容-->padding-->border-->margin
6. 浮动
float: left/right
浮动的副作用
<!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>
<style>
body {margin:0}
.c1 {border :3px solid goldenrod}
.c2 {height:50px;
width:50px;
background-color: red;
float: left}
.c4 {
height: 100px;
width: 50px;
background-color: salmon;
}
.c1:after {
content: "";
clear: left;
display: block;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
<div class="c2"></div>
</div>
<div class="c4"></div>
</body>
</html>
7. 定位
1. 相对定位 --> 相对自己原来在的位置做定位
2. 绝对定位 --> 相对自己已经定位过的祖先标签
3. 固定定位 --> 相对于屏幕做定位
2. 绝对定位 --> 相对自己已经定位过的祖先标签
3. 固定定位 --> 相对于屏幕做定位
<!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>
<style>
body {margin: 0}
.c {height: 100px;
width: 100px;
}
.c1 {background-color: deeppink;
position: fixed;
right:50px;
bottom: 100px}
.c2 {background-color: #FF0000;
position: absolute;
left: 100px;
top: 100px}
.c3 {background-color: salmon;
position: relative;
left:100px;
right:0}
</style>
</head>
<body>
<div class="c c1"></div>
<div class="c c2"></div>
<div class="c c3"></div>
</body>
</html>
8. 溢出
overflow: hidden/scroll/auto
<!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>
<style>
.c1 {height:200px;
width: 200px;
border-width:3px;
border-style:solid;
border-color:deeppink;
border-radius: 50%;
overflow: hidden;
}
.c1>img {width:100%}
.c2 {width:100px;
height:100px;
border-width:5px;
border-style:solid;
border-color:darkred;
overflow: scroll}
</style>
</head>
<body>
<div class="c1">
<img src="P1.png" alt="">
</div>或
<div class="c2">海燕, 在苍茫的大海上, 狂风卷积着乌云,在乌云和大海之间, 海燕像黑色的闪电在高傲的飞翔.</div>
</body>
</html>
9. 边框
border: 1px solid red;border-radius: 50%
10. display
1. block
2. inline
3. inline-block
4. none
活动页面背景不动
<!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>
<style>
*{margin: 0}
.p1 {height: 500px;
background-color: yellowgreen
}
.p2 {height: 500px;
background-color: pink
}
.p3 {height: 500px;
background-color:lightgoldenrodyellow;
}
.box {
/*width: 100%;*/
height:500px;
background-image: url("P1.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="box"></div>
</body>
</html>
浙公网安备 33010602011771号