前端第二天
目录:
- css三种引入方式
- 长度及颜色单位
- 常用样式
- css选择器
一、css三种引入方式
1、行间式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 行间式 -->
<!-- 1. 在标签头部的style属性内 -->
<!-- 2. 属性值满足的是css语法 -->
<!-- 3. 属性值用key: value形式赋值,value具有单位 -->
<!-- 4. 属性值之间用 ; 隔开 -->
<div style="width: 100px; height: 100px;background-color: yellow"></div>
<div></div>
</body>
</html>
2、内联式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 内联式 -->
<!-- 1. 在style标签内(style标签一般作为head的子标签) -->
<!-- 2. 属性值满足的是css语法 -->
<!-- 3. 属性值用key: value形式赋值,value具有单位 -->
<!-- 4. 属性值之间用 ; 隔开(一般独行分开赋值) -->
<!-- 5. 格式: 选择器{样式块} -->
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: brown;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3、外联式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三种引入方式</title>
<link rel="stylesheet" type="text/css" href="01.css">
</head>
<body>
<div></div>
</body>
</html>
div{
width: 200px;
height: 200px;
background-color: brown;
}
注: 三种方式间没有优先级
- 三种方式协同布局
- 不重复的属性一定为唯一位置的唯一值
- 重复的属性采用覆盖赋值,保留最后位置的属性值
- 行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
- !important 会影响优先级
二、长度及颜色单位
1、代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>长度及颜色单位</title>
<style type="text/css">
body {
background-color: yellowgreen;
}
div {
/*长度单位*/
/*px in pt mm cm em rem vw vh*/
width: 100px;
/*width: 720pt; 10in*/
/*width: 100mm; 10cm*/
/*width: 10em; 通常160px 10rem*/
/*width: 50vw; 50% view width*/
height: 100px;
/*颜色单位*/
/*单词 rgb() rgba() #六个十六进制位 hsl()*/
/*background-color: cyan;*/
/*background-color: rgb(255, 0, 0);*/
/*background-color: rgba(255, 0, 0, 0);*/
/*满足AABBCC形式可以简写为abc*/
background-color: #a0c
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、长度单位:
- px:像素(pixel),屏幕上显示的最小单位,用于网页设计,直观方便
- mm:毫米
- cm:厘米
- in:英寸
- pt:点(point),一个标准的长度单位,1pt = 1/72 in,用于印刷业,非常简单易用
- em:相当于长度,通常 1em = 16px ,应用于流式布局
3、颜色单位:
- 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
v_test:熟悉所有的长度单位与颜色表示方式
三、常用样式
1、字体样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style type="text/css">
span {
/*大小*/
font-size: 30mm;
/*字重: bold normal lighter 100~900*/
font-weight: 900;
/*行高: 行高设置大于等于字体大小,字体在行高中垂直居中显示*/
line-height: 50mm;
/*样式: 一般不关心*/
font-style: normal;
/*字族:可以自定义字族*/
/*当Segoe UI Emoji不存在,或不起作用,再选取 微软雅黑 */
/*备用字族*/
font-family: "Segoe UI Emoji", "微软雅黑";
/*css语法: 空格隔开为多个值赋值, ,隔开为一个值多值赋值*/
font: lighter 50mm/80mm "Segoe UI Emoji", "微软雅黑";
}
</style>
</head>
<body>
<span>123abc呵呵</span>
</body>
</html>
- font-family:字体族科,多值用于备用,以 '英文逗号' 隔开
font-family: "STSong", "Arial";
- font-size:字体大小
- font-style: 字体风格 normal | italic | oblique
- font-weight:字体重量 normal | bold | lighter | 100~900
- line-height:行高
- font:字重 风格 大小/行高 字族
2、文本样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
h1 {
text-align: center;
}
span {
/*颜色*/
color: red;
/*水平居中方式:left center right*/
text-align: center;
/*字划线: underline(下划线) line-through(中划线) overline(上划线) none(取消划线)*/
text-decoration: line-through;
/*字间距*/
letter-spacing: 3px;
/*词间距*/
word-spacing: 10px;
}
div {
width:300px;
/*显示方式*/
display: inline-block;
}
/*对齐方式*/
div {
font-size: 12px;
/*垂直排列方式: top baseline bottom*/
vertical-align: baseline;
/*缩进(一个em相当于一个中文汉字的大小)*/
text-indent: 2em;
}
/*遇到连体的英文,html将其解析成一个单词(整体)*/
.div {
/*按标签的设定宽度强行换行,可以在单词(整体)内部换行*/
word-break: break-all;
}
</style>
</head>
<body>
<h1>标题</h1>
<span>123 abc 呵呵</span>
<div>嘻嘻 哼哼 呵呵 哈哈</div>
<div>red yellow green big small red yellow green big small</div>
<div class="div">jljskladjfasdlfjklsajdfjaslkfjansfoiasfjnasddfjasdfjioasdjfmnasdfjasodifjoiasdjfmackjnasdojflaskd'fkamjasdfjkdfjasdmnfkasdfjojsadoifjasdofjsdo</div>
</body>
</html>
- color:文本颜色
- text-align:横向排列
- vertical-align:纵向排列
baseline: 将支持valign特性的对象的内容与基线对齐
sub: 垂直对齐文本的下标
super: 垂直对齐文本的上标
top: 将支持valign特性的对象的内容与对象顶端对齐
text-top: 将支持valign特性的对象的文本与对象顶端对齐
middle: 将支持valign特性的对象的内容与对象中部对齐
bottom: 将支持valign特性的对象的文本与对象底端对齐
text-bottom:将支持valign特性的对象的文本与对象底端对齐
- text-indent:字体缩减
- text-decoration:字划线
- letter-spacing:字间距
- word-spacing:词间距
- word-break:自动换行
normal: 默认换行规则
break-all:允许在单词内换行
3、背景样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
background-color: yellow;
}
div {
/*背景图片*/
background-image: url("data/bg_repeat.gif");
/*平铺: no-repeat(不平铺) repeat-x(x轴平铺) repeat(平铺) */
background-repeat: no-repeat;
/*
定位: 设置一个值为10px 第二个值默认center
多个值: 第一个值控制水平位置,第二个值控制垂直位置
*/
background-position: 10px;
/* : scroll fixed*/
background-attachment:scroll;
}
div {
/*整体设置*/
background: url("data/bg_corgi.png") 10px 10px no-repeat red;
}
</style>
</head>
<body>
<div></div>
<!-- br*100 -->
</body>
</html>
- background-color:颜色
- background-image:图片
- background-repeat:重复
- background-position:定位
v_hint:定位值可为方位词、百分比及固定值,值个数默认为两位(水平/垂直),一个值时垂直默认center
- background-attachment:滚动模式 scroll | fixed
v_eg:父级设置属性,子集内容超出父级范围
v_hint:掌握基本属性
四、css选择器
一、基础选择器
1、通配选择器
- {
border: solid;
}
匹配文档中所有标签:通常指html、body及body中所有显示类的标签
2、标签选择器
div {
background-color: yellow;
}
匹配文档中所有与标签名匹配的标签:如div{}会匹配文档中全部div,span{}会匹配文档中所有span
3、类选择器
.red {
color: red;
}
匹配文档中所有拥有class属性且属性值为red的标签:如<sup class="red"></sup> <sub class="red"></sub>均会被匹配
4、id选择器
#div {
text-align: center;
}
匹配文档中所有拥有id属性且属性值为div的标签:如<div id="div"></div> <section id="div"></section>均会被匹配
5、代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
/*2.标签选择器(标签名): 匹配指定标签名的对应所有标签*/
div {
width: 100px;
height: 100px;
background-color: red;
}
section {
width: 200px;
height: 200px;
background-color: yellow;
}
/*3. 类选择器(.): 匹配指定类名对应的所有标签*/
.dd {
font-size: 50px;
}
/*4. id选择器(#): 匹配指定id名对应的唯一标签*/
/*html,css都是标记语言,所有对id可以进行多匹配,但js是编程语言 . 只能匹配到一个*/
#ele {
color: blue;
}
</style>
</head>
<body>
<div class="dd">d_1</div>
<section id="ele">s_1</section>
<div>d_2</div>
<section class="dd">s_2</section>
<span></span>
</body>
</html>
6、总结
-
通配选择器一般用于整体reset操作(reset操作: 清除系统自定义样式)
-
标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局
-
类选择器为布局首选(建议基本全用class选择器进行布局)
二、基础选择器优先级
- 基础选择器优先级大致与选择器匹配范围成反比,匹配范围越小,优先级越高
- 基础选择器优先级大致与选择器匹配精度成正比,匹配精度越高,优先级越高
- 基础选择器优先级:id选择器 > 类选择器 > 标签选择器 > 通配选择器
v_hint:id选择器必须保证单文档的唯一性
三、组合选择器
1、群组选择器
div, span, .red, #div {
color: red;
}
- 一次性控制多个选择器
- 选择器之间以,隔开,每一个选择器位均可以为任意合法选择器或选择器组合
2、子代(后代)选择器
子代选择器用>连接
body > div {
color: red;
}
后代选择器用空格连接
.sup .sub {
color: red;
}
- 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 子代选择器必须为一级父子嵌套关系,后代选择器可以为一级及多级父子嵌套关系
3、相邻(兄弟)选择器
相邻选择器用+连接
.d1 + .d2 {
color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
color: red;
}
- 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 相邻选择器必须为直接相邻关系,兄弟选择器可以为直接相邻或间接相邻关系
四、组合选择器优先级
- 组合选择器优先级与权值相关,权值为权重和
- 权重对应关系
选择器 | 权重 |
---|---|
通配 | 1 |
标签 | 10 |
类、属性 | 100 |
id | 1000 |
!important | 10000 |
- 选择器权值比较,只关心权重和,不更新选择器位置
- 不同级别的选择器间不具备可比性:1个类选择器优先级高于n个标签选择器的任意组合
五、属性选择器
- [attr]:匹配拥有attr属性的标签
- [attr=val]:匹配拥有attr属性,属性值为val的标签
- [attr^=val]:匹配拥有attr属性,属性值以val开头的标签
- [attr$=val]:匹配拥有attr属性,属性值以val结尾的标签
- [attr*=val]:匹配拥有attr属性,属性值包含val的标签
网友评论