前端之CSS
目录
一.css三种引用方式
1.行间式
1.在标签头部的style属性内
2.属性值满足css语法
3.属性值用key:value形式赋值
4.属性值之间用";"号隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 行列式 -->
<div style="width: 100px;height: 100px;background-color: red"></div>
</body>
</html>
2.内联式
1.在style标签内(style标签一般作为head的子标签)
2.属性值满足css语法
3.属性值用key:value形式赋值
4.属性值之间用";"号隔开
5.格式:选择器{样式块}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 内联式 -->
<style>
div{
width: 100px;
height: 100px;
background-color: blue
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.外联式
1.在外部css文件中
2.属性值满足css语法
3.属性值用key:value形式赋值
4.属性值之间用";"号隔开
5.格式:选择器{样式块}
6.将html与css文件建立联系,通过link标签链接外部css(一般出现在head中)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 外联式 -->
<link rel="stylesheet" type="text/css" href="01.css">
</head>
<body>
<div></div>
</body>
</html>
css文件(01.css)
div{
width: 200px;
height: 200px;
background-color: green;
}
4.三种方式的优先级
三种方式间没有优先级,三种方式协同布局,不重复的属性都可以存在,重复的属性采用覆盖赋值,保留最后位置的属性值,行间式一定是逻辑上最后被解析的,!important会影响解析顺序.
二.样式与长度颜色
1.基本样式
<head>
<style>
div{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
2.长度
- px:像素(pixel),屏幕上显示的最小单位
- mm:毫米
- cm:厘米
- in:英寸
- pt:点(point),一个标准的长度单位,1in = 72pt
- em:相对长度,1em=16px
推荐使用px(像素)作为网页制作单位
3.颜色
- 英文单词:如red,green,yellow等
- rgb():r表示red,g表示green,b表示bule,色彩三原色,三个值可为[0-255]数值或百分比,以逗号相隔
- rgba():前三个值可为像素或百分比,最后一个为[0,1]数值,表示透明度
- hsl():h为Hue,表示色相,s为Saturation,表示饱和度,l为Lightness,表示明度,第一个值为[0,360]数值,后两个值为百分比
- 在#后跟六个十六进制数,如#AABBCC,每两位一整体,分别表示色彩三原色,可以简写为#abc
三.常用样式
1.字体样式
- font-size:字体大小
- font-weight:字重,就是字体粗细 bold加粗/normal正常/lighter加细/100~900
- line-height:行高.设置时大于等于字体大小,字体在行高中垂直居中显示
- font-style:字体风格 normal正常/italic斜体
- font-family:字族,设置字体类型,可设置多个值,如果前面的字体不存在或不起作用,会选择后面的字体
- font:字重 风格 大小/行高 字族
<style>
span{
/*大小*/
font-size: 30mm;
/*字重:bold normal lighter 100~900*/
font-weight:normal;
/*行高:行高设置大于等于字体大小，字体在行高中垂直居中显示*/
line-height: 50mm;
/*样式:一般不关心*/
font-style: oblique;
/*字族：可以自定义字族*/
/*当STHuPo字体不起作用，不存在，再选择STCaiYun*/
font-family: "STHuPosss", "STCaiYun";
/*css语法：空格隔开为多个值赋值，逗号隔开为一个值多值赋值*/
font: lighter 50mm/80mm "STHuPosss", "STCaiYun";
}
</style>
2.文本样式
- color:文本颜色
- text-decoration:字划线 underline下划线/line-through中划线/overline上划线
- letter-spacing:字间距
- word-spacing:词间距
- text-align:文本对齐方式.横向排列 left居左/center居中/right居右
- vertical-align：纵向排列
baseline：将支持valign特性的对象的内容与基线对齐
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：将支持valign特性的对象的内容与对象顶端对齐
text-top：将支持valign特性的对象的文本与对象顶端对齐
middle：将支持valign特性的对象的内容与对象中部对齐
bottom：将支持valign特性的对象的文本与对象底端对齐
text-bottom：将支持valign特性的对象的文本与对象底端对齐
- word-break:自动换行 normal默认换行规则/break-all允许在单词内换行
- text-transform:英文字母大小写的转换 capitalize首字母大写/upercase所有字母大写/lowercase所有字母小写
- text-indent:可以控制段落的首行缩进与缩进的距离
- margin:设置段落之间的距离
3.背景样式
background-color:设置背景颜色
background-image:指定在元素的背景中出现的背景图片
background-repeat:背景重复,通常配合background-image使用 no-repeat图片不重复/repeat-x图片水平地重复/repeat-y图片垂直地重复
background-position:背景定位,该属性将使用两个通过空格分隔的值,指定了图像的水平(x)和垂直(y)坐标,该属性可以接收不同的值类型
background-position:200px 25px
background-position:60% 35%
/*关键字 top|bottom|left|right|center*/
background-position:right top
background-attachment:背景附着
background-attachment:scroll|fixed|local;
scroll: 这将把背景修改为页面视图，因此它将在页面滚动时滚动。
fixed: 不管你是滚动页面还是背景设置的元素，它都会保持在相同的位置。
local:当滚动元素时，背景会随之滚动。
background:背景简写,将背景属性设置在一个声明中
body {
background:
url(a.jpg) /* image */
top center / 200px 200px /* position / size */
no-repeat /* repeat */
fixed /* attachment */
padding-box /* origin */
content-box /* clip */
red; /* color */
}
四.CSS选择器
1.基础选择器
通配选择器
匹配文档中所有标签,指html.body以及body中所有具有显示效果的标签.
*{
border:solid
}
标签选择器
匹配文档中所有与标签名匹配的标签:如div{}会匹配文档中全部div
div{
color:green;
font-size:20px;
}
类选择器
匹配文档中所有拥有class属性且class属性值为类选择器名的标签
.red{
color:red
}
如:<sub class="red"></sub>会匹配red类选择器
id选择器
匹配文档中所有拥有id属性且属性值为id选择器名的标签
#div{
text-align:center;
}
如:<div id="div"></div>
<span id="div"></span>均会匹配到名为div的id选择器
2.基础选择器优先级
- 基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
- 基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
- 基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器
