前端 css
层叠样式表
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）
注释
/*单行注释*/
/*
多行注释
*/
语法结构
选择器 {属性：属性值;属性：属性值;属性:属性值;}
h1 {color:red;font-size:14px;}
三种引入css样式的方式
1 head内style标签内部直接书写css代码
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
p {
background-color:red;
}
</title>
</head>
（背景框会展示出来）
2 link标签引入外部css文件
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
3 直接在标签内通过style属性书写css样式
<p style="color:red"> hello word.</p>
！！！ css样式通常都应该写在单独的css文件中
css的流程
1 选学习如何查找标签
基本选择器
标签选择器
id选择器
类选择器
通用选择器
组合选择器
后代选择器
二字选择器
毗邻选择器
弟弟选择器
属性选择器
伪类选择器
伪元素选择器
基本选择器
- 标签选择器 所有span标签的颜色都是红色
<style>
span {color:red;}
<style>
- id 选择器 将id所对应的标签样式修改
<style> #s1 {font-size: 24px;} <style>
- 类选择器 会把所有的类包裹继承的标签颜色都改成一样的 还有类下面的子标签 子子标签
.c1 {color: #43ceff
}
- 通用选择器 会把所有没有标签样式的都改为一样的标签颜色
* { color: #ff100c
}
如果是一个类选择器 和一个通用选择器的话 会出现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 {color: #43ceff } * { color: #ff100c } </style> </head> <body> <span id="s1">span</span> <div class="c1">div <p>p <span>span</span> </p> </div> <div class="c1">div</div> </body> </html>
这是下面相同选择器 级别不同 类的优先级权重 高于 通用的 类先把所有的类自己的包括内部的和继承的改为类选择器颜色
后面 按照从上往下的执行顺序的时候 通用选择器在把 所有没有选择器的标签颜色改为通用的颜色
组合选择器
- 后代选择器 后面里面所有的span标签都变成蓝色 子子孙孙
<style>
div span {
color: blue;
}
</style>
- 儿子选择器 把div里面所有被div包含的span找到 （只找儿子 这一级） 都改为红色
<style> div>span { color: red; } </style>
- 毗邻选择器 + 对下不对上 （且只找最近的一个） 都改为蓝色
<style> div+span { color: blue; } </style>
- 弟弟选择器 ~对下不对上 只要是同级别的 在div后面的都是它弟弟
<style> div~span {color: deeppink} </style>
属性选择器
- 只要有xxx属性名的标签都找到 [xxx] {color:red;}
<style>
[xxx] {color: red}
</style>
- 只要标签有属性名为xxx 并且值为1 [xxx='1'] {color:blue;}
<style> [xxx='1'] {color: blue} </style>
- 规定p标签内部徐徐有属性名为xxx并且值为2的标签 p[xxx='2'] {color:green;}
<style>
/*规定p标签里面内部必须有属性名为xxx 并且值为2的标签*/
p[xxx='2'] {color: green;}
</style>
分组与嵌套
- div 标签一个样式 p 标签一个样式 span 标签一个样式
<style>
div {color: red;}
p {color: red;}
span {
color: red;}
</style>
- 分组 div ,p,span {color :blue;} 就是把上面单个单个的标签选择器 简写
<style>
/*分组*/
div,p,span {color: red}
</style>
- 嵌套：不同的选择器可以共用一个样式 后代选择器与标签选择器组合使用
<style>
/*嵌套：不同的选择器可以使用同一个样式
后代选择器与标签组合使用
*/
div p,span {color: yellow}
</style>
伪类选择器
- 针对的是a 连接标签 四种状态 未点击时 鼠标悬浮上面 点击时 点击后返回
<style>
/*未点击时*/
a:link {
color: red;
text-decoration:None;
}
/*鼠标悬浮上面*/
a:hover {
color: yellow;
}
/*点击时*/
a:active {
color: black;
}
/*点击后返回*/
a:visited {
color: green;
}
</style>
补充：input:focus{ /*input输入框获取焦点时样式*/
background-color:red;} 文本框输入的时候可以显示文本框的背景颜色
text-decoration: None; 连接下划线去掉
伪元素选择器
- 可以设置手字母样式 可以在标签前面添加内容 可以在标签后面添加内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*首字母大写 并且设置颜色红色*/ p:first-letter { color: red; font-size: 24px; } /*在p标签前面加上内容*/ p:before{ content: '这是添加的内容'; color: orangered; } /*这是标签后面添加的内容*/ p:after{ content: '这是后面添加的'; color: orange; font-size: 48px; } </style> </head> <body> <p>继承是css的一个主要特征，它是依赖于组向圣诞节放假快乐</p> <p>继承是css的一个主要特征，它是依赖于组向圣诞节放假快乐</p> <p>继承是css的一个主要特征，它是依赖于组向圣诞节放假快乐</p> </body> </html>
2 如何给查找到的标签设置样式
id 用来唯一标识标签 class 标签类属性（*****）,可以由多个值 可以理解成python面向对象的继承
3 你可以给任意的标签加任意的属性名和属性值
<style>
p[xxx='2'] {color:red;}
</style>
<p xxx='2'>ppp</p>
4 研究选择器优先级
相同选择器 不用的引入方式 就近原则 谁越靠近标签谁说了算
不同选择器 相同的引入方式
行内样式 > id 选择器 > 类选择器 > 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器*/
#p1 {color: green;}
/*类选择器*/
.c1 {color: aqua;}
/*标签选择器*/
p {color: red;}
</style>
<!--标签选择器-->
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id="p1" class="c1" style="color: blue">p</p>
</body>
</html>
5 如何修改标签样式
- 样式修改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { 400px; height: 100px;} p {font-size: 16px; font-weight: bolder;} </style> </head> <body> <div>div</div> <div>div</div> <p>坚实的科技了解了解</p> </body> </html>
font-weight用来设置字体的自重（粗细）
- 文本颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*color: orange;*/ /*color: rgb(0,0,255)*/ /*color:#ff100c;*/ /*最后一个参数控制的是透明度*/ color: rgba(0,0,234,0.3); } </style> </head> <body> <p>这是文本颜色修改的</p> </body> </html>
- 文本属性
- 文本内容是右对齐right 左对齐left（默认） 居中center justify 两端对齐
- 本文内容上面加下划线overline
- 下面加下划线underline
- 作废线(穿过文本下的一条线) line-through
- 缩进 text-indent
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*把p标签内容 右对齐 */ /*text-align: right;*/ /*text-align: center;*/ /*text-align: left;*/ /*把p标签内容下面加上下划线*/ text-decoration: underline; /*把p标签内容上面加一条下划线*/ /*text-decoration: overline;*/ /*p标签内容有一条横线 和作废一段话一样*/ /*text-decoration: line-through;*/ /*把p标签内容缩进48px像素位置*/ text-indent: 48px; } /*连接下划线去掉*/ a {text-decoration: none} </style> </head> <body> <p>以把多个字体名称作为</p> <a href="https://www.baidu.com">百度</a> </body> </html>
- 背景属性
- 背景颜色 background-color
- 背景图片填充 background-image:url('图片')
- 是否重复repeat(默认）：背景图片平铺排满整个网页
- repeat-x :背景图片只在水平方向上平铺
- repeat-y: 背景图片只在垂直方向上平铺
- not-repeat: 背景图片不平铺
- background-repeat:no-repeat;
- 背景位置 background-position:left top;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { 400px; height: 400px; /*背景颜色*/ /*background-color: orange;*/ /*background-image: url("1.png");*/ /*!*不重复*!*/ /*background-repeat: no-repeat;*/ /*!*位置 left左面居中对齐 *!*/ /*background-position: center;*/ /*支持简写*/ background: no-repeat center url("1.png") orange; } </style> </head> <body> <div></div> </body> </html>
- 背景图片示例 设置图片宽度 颜色 背景可以支持固定其他页面划动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height: 400px; background-color: tomato; } .box { height: 400px; background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg"); /*背景附件 固定的*/ background-attachment: fixed; /*可以只填充一个不重复的图片 且 图片周围有背景色 支持滑动*/ /*height: 400px;*/ /*background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");*/ /*background-color: orange;*/ /*background-repeat: no-repeat;*/ /*background-position: center;*/ /*background-attachment: fixed;*/ } .c2 { height: 400px; background-color: red; } .box1 { height: 400px; background: url("jie.jpg"); background-position: center; /*背景附件 固定的*/ background-attachment: fixed; } .c3 { height: 400px; background-color: fuchsia; } </style> </head> <body> <div class="c1"></div> <div class="box"></div> <div class="c2"></div> <div class="box1"></div> <div class="c3"></div> </body> </html>
- 边框
- 边框宽度 border-width
- 边框是实线、虚线 border-style;
- 颜色 border-color;
- 边框样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { border: 3px solid red; /*border- 3px;*/ /*!*dashed虚线*!*/ /*border-style: dashed;*/ /*border-color: deeppink;*/ } </style> </head> <body> <div>div</div> </body> </html>
- 画圆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { 400px; height: 400px; background-color: red; /*边框颜色 实线 3px*/ border: 3px solid black; /*半径是边缘的50%*/ border-radius: 50%; } </style> </head> <body> <div></div> </body> </html>
- display 属性
- none 将块级标签内容隐藏起来并让位置
- inline 将块级标签变成行内标签
- block 将行内属性变成块级标签
- inline-block 将选择的标签即具有行内标签特点又有块级标签的特点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div {*/ /*!*不显示不占位*!*/ /*display: none;*/ /*}*/ /*div {*/ /*!*inline将款及标签变成行内标签*!*/ /*display: inline;*/ /*}*/ /*span {*/ /*!*block 块 将行内标签变成 块级标签*!*/ /*display: block;*/ /*}*/ span { /*将选择的标签即具有行内标签特点又有块级标签的特点*/ display: inline-block; height: 400px; 400px; background-color: red; border: 3px solid black; } </style> </head> <body> <div>div</div> <div>div</div> <span>span</span> <span>span</span> </body> </html>