目录
- 一、css的三种引用方式
- 行间式
- 内联式
- 外联式
- 二、三种引入的优先级
- 三、样式与长度颜色
- 基本样式
- 长度
- 颜色
- 四、常用样式
- 字体样式
- 文本样式
- 背景样式
- 五、css选择器
- 基础选择器
- 基础选择器优先级
- 组合选择器
- 组合选择器优先级
- 属性选择器
一、css的三种引用方式
行间式
1.在标签头部的style
2.属性值是css语法
3.属性值用Key：value形式赋值，value具有单位
4.属性值之间用;隔开
<div style=‘width:100px;height=100px;backgroud-color:red;‘>
</div>内联式
1.在style标签内部(style标签一般作为(head的子标签))
2.属性值是css语法
3.属性值用Key：value形式赋值，value具有单位
4.属性值之间用;隔开（一般独立分开赋值）
5.格式：选择器{样式块}
<style type=‘text/css‘>
div{
width:100px;
height:100px;
backgroud-color:red;
}
</style>外联式
1.在外部CSS文件中
2.属性值是css语法
3.属性值用Key：value形式赋值，value具有单位
4.属性值之间用;隔开（一般独立分开赋值）
5.格式：选择器{样式块}
6.将html和css文件建立连接：通过link标签链接外部CSS
?
<link rel=‘stylesheet‘ type=‘text/css‘ href=‘css/01.css‘>01.css
div{
width:100px;
height:100px;
backgroud-color:red;
}二、三种引入的优先级
注:三种方式之间没有优先级之分
1.三种方式协同布局,从上往下解析
2.不重复的属性一定为唯一位置
3.重复的属性采用覆盖赋值，保留最后位置的属性值
4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
5.!important会影响优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type=‘text/css‘>
div{
width:100px;
height: 100px;
background-color: yellow;
}
</style>
<link rel="stylesheet" type="text/css" href="02.css">
</head>
<body>
<div style=‘background-color: yellowgreen‘></div>
</body>
</html>02.css
div{
width:100px;
height: 100px;
background-color: red;
}三、样式与长度颜色
基本样式
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>长度
- px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便
- mm：毫米
- cm：厘米
- in：英寸
- pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；
- em：相当长度，通常1em=16px，应用于流式布局
- vw：相对长度，将窗口分为100等份
颜色
- rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）
- rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）
- hsl()：第一个值为[0,360]数值，后二个值可为百分比，以,相隔（h:Hue s:Saturation l:Lightness）
- hsla()：第一个值为[0,360]数值，中间二个值可为百分比，最后一个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
-
AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc
四、常用样式
字体样式
- font-weight:字体重量，bold | normal | lighter | 100~900
- font-style： 字体风格 normal | italic | oblique
- font-size：字体大小
- font-height：行高
- font-family：字族，以都，隔开
font-family:‘STHeiti‘,‘微软雅黑‘；- font：字体重量 字体风格 字体大小 行高 字族
文本样式
- color：文本颜色
- text-align：水平居中方式
left 居左 | center 居中 | right 居右- text-decoration：字划线
underline 下划线 | line-throught 中划线 | overline 上划线 |none - letter-spacing：字间距
- word-spacing：词间距
- text-indent：缩进
- word-break：自动换行
normal：默认换行规则
break-all：允许在单词内换行- vertical-align：纵向排列
baseline：将支持valign特性的对象的内容与基线对齐
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：将支持valign特性的对象的内容与对象顶端对齐
text-top：将支持valign特性的对象的文本与对象顶端对齐
middle：将支持valign特性的对象的内容与对象中部对齐
bottom：将支持valign特性的对象的文本与对象底端对齐
text-bottom：将支持valign特性的对象的文本与对象底端对齐 背景样式
- background-color：背景颜色
- background-image：背景图片
background-image: url(‘bg_repeat.gif‘);- background-repeat：定义了图像的平铺模式
repeat：默认。背景图像将在垂直方向和水平方向重复。
repeat-x：背景图像将在水平方向重复。
repeat-y：背景图像将在垂直方向重复。
no-repeat：背景图像将仅显示一次。
- bakcground-position：设置了图像的起始位置
定位值可为方位词:如果只设置了一个值，第二个默认为center
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
固定值：第一个值控制水平位置，第二个值控制垂直位置。左上角是 0 0。如果只设置了一个值，另一个值将是50%
百分比：第一个值控制水平位置，第二个值控制垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您只设置规定了一个值，另一个值将是 50%。
- background-attachment：设置背景图像的滚动模式
scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
fixed：当页面的其余部分滚动时，背景图像不会移动。五、css选择器
基础选择器
- 通配选择器：匹配html,body,以及body中的所有子标签，就是具有显示效果的所有标签。一般用于整体reset操作（清除系统自定义样式）
*{
margin: 0;
}- 标签选择器(标签名)：匹配制定标签名的对应所有标签，运用场景并不多
div{
width: 100px;
height: 100px;
background-color: red;
}- 类选择器(.)：匹配指令类名对应的所有标签。类选择器为布局首选，建议基本都用类选择器进行布局
.dd{
font-size: 50px
}- id选择器(#)：匹配制定ID名对应的唯一标签。html,css都是标记语言，所有对id可以进行多匹配，但JS是编程语言，只匹配到一个。一般不提倡用id选择器进行布局
#ele{
color: blue;
}基础选择器优先级
- 基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
- 基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
- 基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器
组合选择器
未完待续
组合选择器优先级
未完待续
属性选择器
未完待续
原文地址：https://www.cnblogs.com/xvchengqi/p/9682662.html
时间： 2024-10-22 19:40:52