介绍
- CSS是Cascading Style Sheets的英文缩写,即层叠样式表
- Html【Hyper Text Markup Language】
- CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
- CSS是用于布局与美化网页的
- CSS能实现内容与样式的分离,方便团队开发
- CSS是由W3C的CSS工作组产生和维护的
- 1996年W3C正式推出了CSS1
- 1998年W3C正式推出了CSS2
- 2007年W3C正式推出了CSS2.1
- 2011年W3C正式推出了CSS3,目前仍在持续完善中
CSS语法
CSS 由选择器、属性、属性值组成
选择器{
样式属性名1:样式属性值1;
样式属性名2:样式属性值2;
.....
}
选择器通常是指需要改变样式的 HTML 元素 属性是指希望设置的样式属性 CSS是大小写不敏感的,在CSS语法中推荐使用小写
body{color:red;font-size:20px}
CSS注释
如:
div{
/* 设置宽度为200px*/
width:200px;
}
CSS中的颜色值
十六进制表示方式 #rrggbb 如:#ffcc00 十六进制 0-F
简单十六进制表示方式;#rgb 如:#fc0
rgba表示方式; rgba(x,x,x,a) 其中x是一个0-255的整数值 如:rgb(255,204,0,)
百分比实现rgb形式;rgb(x%,x%,x%) 其中x是一个0-100的整数值 如rgb(100%,80%,0%)
颜色英文单词表示方式 如:red
CSS长度单位
相对长度单位:
px 像素(Pixel)
% 百分比
em : Element meter 根据文档字体计算尺寸
rem :Root element meter 根据根文档( body/html )字体计算尺寸
ex : 文档字符“x”的高度
ch : 文档数字“0”的的宽度
vh : View height 可视范围高度
vw : View width 可视范围宽度
绝对长度单位:
in英寸(Inch) pt 点(Point) cm 厘米(Centimeter) mm 毫米(Millimeter)
换算比例:1in = 2.54cm = 25.4 mm = 72pt
calc
calc:calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度
calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
calc()函数使用标准的数学运算优先级规则;
calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小calc:calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度
案例:使用calc实现左侧固定,右侧自适应效果
```html
<style>
*{
margin: 0;
padding: 0;
}
.box{
overflow: hidden;
background-color: antiquewhite;
}
.left{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.right{
width: calc(100% - 200px);
height: 300px;
background-color: green;
float: left;
}
</style>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
```
html引入CSS的三种方法
1.行内样式(内联样式)
<h1 style="color:red">这是⾏内样式的使⽤⽅式</h1>
2.内嵌样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.text{
color:red;
}
</style>
</head>
<body>
<h1 class="text">这是内部样式引⼊⽅式</h1>
</body>
</html>
3.外部样式
通过 link 标签引⼊
<link rel="stylesheet" href="url"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<h1 class="text">外部样式</h1>
</body>
</html>
通过@import引入
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@import url('../css/demo.css');
</style>
</head>
<body>
<h1 class="text">外部样式</h1>
</body>
</html>
在css文件中引入
@import url('../css/demo.css');
div{
color:red;
}
注意:@import必须在css样式的第一行进行引入,否则不生效
选择器
标签选择器
选择器名称为html标签名称
p { text-indent:3em; } /*当中的选择器是p*/
h1{ color:red; } /*当中的选择符h1*/
类选择器
选择器名称以 . 开始,后面再加上对应元素class属性值
<style>
.dark-row{ background-color:#EAEAEA; }
</style>
<p class="dark-row">第一段</p>
ID选择器
选择器名称以#开始,后面再加上对应元素的id属性值 将对应元素的id属性值设为id选择器名称
<style>
#main{ text-indent:3em; } /*ID名称main前加上一个#号*/
</style>
<p id="main">文本缩进3em</p>
通配所有元素
*{font-size:12px;color:#888}
分组选择器
h1, h2, p {
text-align: center;
color: red;
}
选择器的优先级
ID选择器 >类选择器>标签选择器>通配符选择器
派生选择器
后代选择器: 以空格分隔
子元素选择器: 以>分隔
相邻兄弟选择器:以+分隔
普通兄弟选择器:以~分隔
<style>
/*相邻兄弟选择器
选中和第一个元素相邻的第二个元素*/
p + b {
color: red;
}
/*普通兄弟选择器
匹配和第一个元素后面的所有同级元素;*/
p ~ b {
color: blue;
}
</style>
<ul class="wrapper">
<li>1
<b>这是粗体123</b>
<p>这是一段段落</p>
<span>12344555656</span>
<b>这是粗体</b>
<p>这是一段段落2</p>
</li>
<li>2
<p>这是一段段落</p>
<b>这是粗体</b>
<b>这是粗体2</b>
</li>
<li>3</li>
</ul>
选择器的权重
最⾼权重
!important 的作用是提升优先级,换句话说。加了这句的样式的优先级是最高的(比内联样式的优先级还高)。 当 !important 规则被应⽤在⼀个样式声明中时,该样式声明会覆盖CSS中任何其他的声明,⽆论它处在声明列表中的哪个位置。
- css选择规则的权值不同时,权值高的选择器优先
- css选择规则的权值相同时,后定义的选择器规则优先
- css属性后面加 !important 时,无条件绝对优先
总体来说: !important > 行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器 注意:减少选择器的个数:“在css规则中尽可能的使用较少的选择器”。
CSS三大特性
层叠性
- 所谓层叠性是指多种CSS样式的叠加
- 层叠性是浏览器处理冲突的⼀个能⼒,如果⼀个属性通过两个相同选择器设置到同⼀个元素上,那么这个时候⼀个属性就会将另⼀个属性层叠掉(覆盖)
- 样式不冲突,不会层叠
- 样式冲突;就会层叠; 按照优先级,决定哪个样式⽣效
继承性
- CSS 的继承特性指的是应⽤在⼀个标签上的⼀些 CSS 属性被传到其⼦标签上;就是被⼦标签继承
- 不是所有的样式都会被⼦标签继承, 字体类font- ; ⽂本类 text- ; 颜⾊color ; ⾏⾼line-height 等可以被继承
- a标签⽐较特殊,没有办法通过继承改变a标签的字体颜⾊
优先级
- 权重的优先级,决定哪个样式最终⽣效
- 权重相同: 后者⽣效; 权重不同: 权重⾼者⽣效
CSS字体样式
1.CSS字体
1.1字体样式
font-style 设置字体样式
- normal:指定⽂本字体样式为正常的字体
- italic:指定⽂本字体样式为斜体。
```css
.normal {
font-style:normal
}
.italic {
font-style:italic
}
```
1.2 文本字体
font-family 属性设置⽂本的字体 font-family 属性应该设置⼏个字体名称作为⼀种"后备"机制,如果浏览器不⽀持第⼀种字体,他将尝试下 ⼀种字体
p {
font-family:"Times New Roman", Times, serif;
}
1.3 字体粗细
font-weight:定义字体粗细
- normal:正常的字体。相当于number为400
- bold:粗体。相当于number为700
- bolder:特粗体。也相当于strong和b标签的作⽤
- lighter:细体
- :⽤数字表示⽂本字体粗细。取值范围:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 400;
}
1.4 字体大小
font-size:
font-size:定义字体⼤⼩
- 把字体的尺⼨设置为不同的尺⼨。可选参数值:xx-small | x-small | small | medium | large | x-large | xx-large
- 相对于⽗对像中字体尺⼨进⾏相对调节。使⽤成⽐例的em单位计算。可选参数值:smaller | larger
- ⽤数值指定⽂字⼤⼩。不允许负值
- ⽤百分⽐指定⽂字⼤⼩。其百分⽐取值是基于⽗对象中字体的尺⼨。不允许负值
/* 设定段落⽂字⼤⼩为⾮常⼤ */
p { font-size: xx-large }
/* 设定⼀级标题的⽂字⼤⼩为2.5倍⼤⼩ */
h1 { font-size: 250% }
/* 设定span⾥的⽂字⼤⼩为16px */
span { font-size: 16px; }
.larger { font-size: larger; }
.point { font-size: 24em; }
.percent { font-size: 200%;}
1.5 字体行高
line-height:设置行高
- normal:默认值。
- :⽤⻓度值指定⾏⾼。可以为负值。
- :⽤百分⽐指定⾏⾼,其百分⽐取值是基于字体的⾼度尺⼨。可以为负值。
- :设置数字,此数字是当前的字体⼤⼩的倍数。
p {
line-height: normal;
}
p {
line-height: 35px;
}
p {
line-height: 3em;
}
p {
line-height: 34%;
}
1.6 综合设置
CSS字体属性font定义字体,加粗,⼤⼩,⽂字样式。 该属性是复合属性
```css
font:<font-style> <font-weight> <font-size>/<line-height> <fon-family>
p {
font:20px/1.5 '微软雅⿊'
}
p {
font:bold 20px/30px '微软雅⿊'
}
```
2 引入外部字体
<style type="text/css">
/* 第一步: 声明一个字体 */
@font-face {
font-family: my-font;/*自定义名称*/
src: url('时尚中黑简体.ttf');
}
@font-face {
font-family: my-font2;
src: url('迷你简双线体.ttf');
}
/* 第二步: 使用字体 */
p {
font:50px my-font,sans-serif;
}
div {
font:50px my-font2,sans-serif;
}
</style>
<p>
这是一个段落标签
</p>
<style>
@font-face{
font-family: feng;
src: url('./font/hongleizhuoshujianti.ttf');
}
p{
font: 100px feng;
}
</style>
</head>
<body>
<p>站长字体站长字体站长字体站长字体站长字体站长字体</p>
</body>