1.css的解释: 修饰/美化页面的
语法组成: 选择器{声明}
声明里面包含属性和属性值
- 选择器{属性1:属性值1;属性2:属性值2}
- 选择器: 修饰对象
- 属性: 描述对象的特征/特点
- 属性值
注意点:
css语法和html语法的区别
① css是有选择器 选择器后面有大括号
②大括号内写的是声明
③声明包含属性和属性值
④属性和属性值之间用冒号相连
⑤ 当一个选择器有多个声明的时候 属性的顺序是不区分前后的
⑥有多个属性的时候 第一个声明结束后面需要加上分号
案例:李同学 身高180cm 体重180kg 长相吴彦祖
- html <李同学 身高="180cm" 体重="180kg" 长相="吴彦祖"></李同学>
- css 李同学{身高:180cm ;体重:180kg; 长相:吴彦祖;}
css概念:层叠样式表
- 一个标签可以有多个选择器 :id class 标签 包含...
- 多个选择器中属性如果是相同的 会覆盖选择权重最高的显示
- 选择器中的属性是不相同的 会重叠 相加显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
color: red /* 1 */
}
#name{
color: green /* 100 */
}
.name{
color: pink /* 10 */
}
/* 1 */
/* img{} */
/* 1 + 1 + 1 + 1 */
/* ul li a img{} */
</style>
</head>
<body>
<div id="name" class="name" style="color: purple">胜平同学</div>
<ul>
<li>
<a href="">
<img src="" alt="">
</a>
</li>
</ul>
<img src="" alt="">
</body>
</html>
效果图:
2.css样式表的创建方式
css的样式表创建方式:行内式/内嵌式、内部式、外部式
语法组成: 选择器{属性:属性值}
1.行内式的创建方式
- 需要在标签的内部创建样式表
- 在标签内书写一个style属性
- 在style的属性值位置直接书写声明即可
<body>
<p style="background-color: red;">ssssasda</p>
<div style="background-color: green; font-size:30px; width:500px;" >asdasdas</div>
</body>
2.内部式的创建方式
- 需要在head标签内创建
- 在head内创建style标签
- 在style标签内书写规范的css语法即可
3.外部式的创建方式
- 需要在外面创建一个.css文件
- 需要让html文件和css文件之间形成关联 使用link标签
- link标签建议写在head区域内
拓展: 外部样式表的第二种引入方式
- @import 导入方式 目前只做了解 后期可以使用这种方式导入模块 先加载结构 后加载样式
- 需要在style标签中书写
- @import url("路径")
- link 结构文件和样式文件会一起加载
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 头部 描述区域 引入外部的资源进行解析 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
<!--
rel:文档关联
href:路径
-->
<!-- <style>
@import url('css/style.css')
</style> -->
</head>
<body>
<!-- 字体颜色属性 color -->
<div>李同学</div>
</body>
3.样式表的优先级
1.样式表的使用环境
- 行内式: 一般是不用的
- 内部式: demo
- 外部式: 工作中写项目最常用的一种创建方式
2.如果三种样式表同时存在的时候会出现什么问题?
- 浏览器的控制台如果有黑色的横线划掉属性属性值 表示有属性冲突
总结样式表优先级
- 行内式的优先级大于内部式 行内式的优先级也大于外部式 => 行内式的优先级最高
- 内部和外部的样式表写在下面的优先级会更高
- 结论: 行内样式表的优先级最高 内部和外部取决于书写顺序 在下面的优先级更高 - 就近原则
注意(只会覆盖相同的央视语句,不同的会保留)
4.css选择器
选择器/选择符的使用:通过一种方式选中你想要修饰的对象
选择器的分类: 标签、id、class(类)、包含、群组、通配符、伪类
①标签选择器
- 通过选择html的标签名称进行修饰
- 所有的html标签都可以作为选择器使用
②.id选择器
- 在标签内添加id属性和属性值
- 在样式表中使用 #id属性值{属性:属性值}
- 作用:id选择器在一块布局中表示最大的 并且只能有一个
③class选择器(类选择器)
- 在标签内添加class属性和属性值
- 在样式表中使用 .class属性值{属性:属性值}
- 作用:表示选择到相同一类的标签进行修饰
注意:类名可以重复使用
如果有多个标签的样式完全是一摸一样的,就可以给他们起共同的名字。
命名规则:
1.可以使用字母、数字、_、$
2.数字不允许开头 p1(可以) 1p(不可以)
3.不允许使用关键字(官方已经使用过,并且有特殊含义的单词)
4.最好做到见名知意
类名选择器可以起多个类名
<style>
.d1{
color: red;
}
.box1{
color: green;
background-color: pink;
}
</style>
</head>
<body>
<div class="d1 box1">类选择器</div>
</body>
④包含选择器:通过父级选择器 选择相应的子级选择器
- 写法: 父级选择器 子级选择器{声明}
⑤群组选择器:选择中相同的声明进行修饰
- 表示选择器不同但是声明是一样 可以把声明简写在一起
- 写法: 选择器1,选择器2,...{声明}
⑥通配符选择器
- 固定用法 * 表示选中当前页面中的所有标签
- *{margin:0;padding:0} 表示清除页面中边距(浏览器默认上下左右是8px的间距)
- margin和padding 标签或者浏览器的内外边距
⑦伪对象/伪元素选择器
①选择器::after{content:''} ===在xx之后
②选择器::before{content:''} ===在xx之前
③选择器::first-line===找到第一行的元素进行操作
④选择器::first-letter===找到第一个元素进行操作
举例:
- cp
- 开端 司机+锅姨 = 司锅姨
伪对象和伪类选择器
- 伪类是一个冒号 ,伪对象在css2中也是一个冒号,在css3中为了区分两者之间的区别 建议写成两个冒号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0;padding:0}
#name,.name,ul li{
color: red
}
</style>
</head>
<body>
<div>1同学</div>
<div id="name">2同学</div>
<div class="name">3同学</div>
<div class="name">4同学</div>
<ul>
<li>文本1</li>
</ul>
<ol>
<li>文本2</li>
</ol>
</body>
</html>
效果图:
伪类介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div::after {
content: '你真帅'
}
div::before {
content: '小'
}
div {
/* display: none */
visibility: hidden;
/* 隐藏文本显示 结构还是存在的 */
}
</style>
</head>
<body>
<div>
文帅同学
</div>
</body>
</html>
结构伪类
/* ul::before {
content: '0';
} */
/* 用来描述标签处于某一个状态时 */
/* :first-child 是修饰 li 标签处于第一个元素位置时的状态 */
/* 既要是 li 标签, 还得是其父元素下的第一个子元素 */
/* li:first-child {
color: red;
} */
/* li:last-child {
color: skyblue;
} */
/*
小括号内应该填写一个公式
+ xn + y
+ x 和 y 的取之范围是所有整数
+ n 的取值范围 0 ~ 正无穷
+ 总和的取之范围: 负无穷到正无穷
+ 2n 等价于 even 偶数
+ 2n + 1 等价于 odd 奇数
问题:
+ 前三个
+ n 取值: 0 ~ 正无穷 0 1 2 3 4 5 6 7 8 9 ...
=> 让 n 改符号变成 -1 * n, 0 -1 -2 -3 -4 -5 -6 ...
+ 需要前三个
=> 让 -1 -2 -3 变成 1 2 3
=> + 3
注意: 在这个公式内, n 必须在前面
*/
/* li:nth-child(-n + 3) {
color: red;
} */
/*
:first-of-type 修饰 li 标签
+ 只要是该父元素下的第一个 li 标签就可以
*/
<!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>
ul, ol, li {
list-style: none;
}
li:first-of-type {
color: red
}
li:last-of-type {
color: skyblue;
}
</style>
</head>
<body>
<ul>
<span>0</span>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<span>11</span>
</ul>
</body>
</html>
效果图:
状态伪类
<!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>
/* 当该 input 被选中以后的样式 */
input:checked {
width: 100px;
height: 100px;
}
p:empty {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p></p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</body>
</html>
效果图:
⑧群组选择器:
<style>
/* p{
color: red;
}
div{
color: red;
}
i{
color: red;
}
s{
color: red;
} */
p,div,i,s{
color: red;
}
</style>
</head>
<body>
<p>ppppppppppppp</p>
<div>divdiv</div>
<h2>hh2h2h2</h2>
<i>iiiiiiiiii</i>
<em>emememem</em>
<s>ssssssssssss</s>
</body>
</html>
<!--
群组选择器:可以一次找到多个标签标签。
使用群组可以减少代码量
群组的标志:逗号
-->
⑨通配符选择器
<style>
*{
color: red;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<p>ppppppppppppp</p>
<div>divdiv</div>
<h2>hh2h2h2</h2>
<i>iiiiiiiiii</i>
<em>emememem</em>
<s>ssssssssssss</s>
</body>
</html>
<!--
通配符选择器:可以找到所有的标签
标志:*
使用场景:
清除标签自带的间距的
*{padding:0;margin:0}
-->
⑩后代选择器:
<style>
/* 找类名为d1之下的span标签 */
/* .d1 span{
color: red;
}
.d2 span{
color: green;
} */
/* .d1 i{
color: blue;
} */
.d1>span{
color: blue;
}
</style>
</head>
<body>
<div class="d1">
<span>
我是d1里面的span
<i>我是d1的孙子</i>
</span>
</div>
<div class="d2">
<span>我是d2里面的span</span>
</div>
</body>
</html>
<!--
后代选择器:
标志:空格
只要是后代都能找到。
子代选择器:
标志:>
只能找到儿子
十一:伪类选择器
①伪类选择器的使用:
- :link {color: red;} /* 未访问的链接状态 */
- :visited {color: green;} /* 已访问的链接状态 */
- :hover {color: blue;} /* 鼠标滑过链接状态 */
- :active {color: yellow;} /* 鼠标按下去时的状态 */
②总结
- 使用伪类选择器 就必须按照这四个顺序书写 不能颠倒
- 伪类花里胡哨使用较少 唯一要注意的是关于hover的使用
- 可以单独使用 可以一起使用(顺序不可乱)
③伪类选择器常用的有四个 重要的有一个 hover 表示鼠标移入时候发生的状态改变
hover伪类的使用: 选择器:hover{}
使用:①改变自己 当前自己的选择器:hover{}
② 通过父级改变子级 父级选择器:hover 子级选择器{}
③通过自己改变同级
注意: hover不可以通过子级改变父级元素!
拓展:css3中选择器
- > 直接子级元素
- ~ 同级所有
- + 表示同级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a:link{
color: red
}
a:visited{
color: green
}
a:hover{
color: blue
}
a:active{
color: purple
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点击跳转到百度首页</a>
</body>
</html>
效果图:
伪类选择器中的hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p:hover ~h1{
color: red
}
</style>
</head>
<body>
<!-- div p -->
<div>
<p>胜平同学</p>
<h1>
<p></p>
</h1>
<h1>妹妹</h1>
</div>
</body>
</html>
效果图:
12.css3选择器
1.当所有的标签是一样的时候:直接而选择集合中第几个
- 选择器:nth-child(n){}
2.当所有的标签不一样的时候:先筛选成多个集合 再从集合中选择第几个
- 选择器:nth-of-type(n){}
注意
- n 表示默认的 选择所有
- 2n 2的倍数
- odd 奇数
- even 偶数
5.选择器的权重
选择器的使用:标签、id、class、包含、群组、通配符、伪类
选择器的权重: 页面中全是div div比较多的时候需要添加不同的选择器 使用四位数字表示的
-通配符:0
- 标签:1
- 类选择器(class)===伪类=== 10
- id选择器:100
- 行内样式表 1000
- 后代、子代选择器:里面所有选择器的和
6.文字的设置
css属性值
- 常规属性值 width:100px
- 法定属性值 background-color:red
字体大小的设置
属性:font-size
属性值:
- 设置字体大小的时候需要写数值和单位(html属性值单位是可以省略的)
- 当字体font-size:0 可以不加单位(处理兼容问题)
- 浏览器中默认的字体大小是16px,谷歌中不低于12px,其他的可能为不能低于10px
- 市场上浏览器特别多 之间存在差异 为了减少差异带来的问题 规定12px是浏览器显示的最小值
- 建议设置字体为偶数
- 除了常见的px单位 还有以下
- pt 磅 硬件设备(了解)
- em 相对单位 相对的是父级元素(首航缩进) 1em = 16px
- rem 相对单位 相对的根元素html(移动端布局中)
ui提供设计图的时候都会标明字体大小: 蓝湖、pxcook
量取设计图上的字体大小:量取字体的高度即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
font-size: 20px;
}
p{
font-size: 2em;
}
span{
font-size: 40px;
}
</style>
</head>
<body>
<span>同学你真帅 假的</span>
<div>
<p>同学你真帅 假的</p><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
font-size: 20px;
}
p{
font-size: 2em;
}
span{
font-size: 40px;
}
</style>
</head>
<body>
<span>同学你真帅 假的</span>
<div>
<p>同学你真帅 假的</p>
</div>
</body>
</html>
</div>
</body>
</html>
效果图:
7.文本颜色
文本颜色的设置
属性: color
属性值
- 法定的属性值: 英文单词 red、green、blue...
书写方式:
①十六进制:
- 以#开头 有六位字符(0123456789abcdef) 忽略大小写
- # 00 00 00 三原色
- 当六位字符是一样的时候可以简写为三位 #000000 => #000
取字体颜色: ps 吸管工具
②- rgb(red,green,blue) 0~255之间
- rgba(red,green,blue,alpha) 透明度 0~1
拓展: 透明的使用
- rgba() 某个元素
- opacity(透明度取值) 0~1 所有元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
color: #000;
opacity:0.5 ;
}
</style>
</head>
<body>
<div>文本</div>
</body>
</html>
效果图:
8.文字倾斜:font-style
属性取值
normal===正常
italic===倾斜====常用
oblique===更倾斜(没有什么效果,只是语气加重)
例如:font-style: oblique;
9.文字居中
①文字的水平对齐方式:text-align
left:左对齐
right:右对齐
center:居中对齐
justify:2端对齐(目前无需研究)
②文字的垂直对齐方式:line-height
当line-height的值和height一致:刚好垂直居中
当line-height的值大于height的时候:会偏下
当line-height的值小于height的时候:会偏上
注意:
如果文字是单行的:line-height可以实现控制垂直对齐的效果
如果文字是多行的:line-height控制的是行与行的间距。
行与行的间距(叫做行高)
10.文字的修饰线
text-decoration===文本修饰线
underline====下划线
overline===上划线
line-through==删除线,贯穿线
none===没有线,主要是用来清除线的(常用)
11.文字样式
①大小写转换text-transform
uppercase===转大写
lowercase==转小写
capitalize===首字母大写
② 字间距:letter-spacing
③ 词间距:word-spacing 程序里边以空格来区分词
12.首行缩进
text-indent: 单位:em(相对于当前文字的大小而言)
假设文字的大小是12px,则1em=12px,2em=24px