css选择器
什么是css
css是级联样式表,是一套设置规则,可以用于控制web页面布局
一 CSS引入方式
三种引种方式
1.head引入,通过style标签
2.外部引入,通过link标签引入外部已经定义好的css样式资源
3.标签内引入(即属性引入)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 1.head引入 -->
<!-- <style type="text/css">
div{
color: aqua
}
</style> -->
<!-- 2.外部引入 -->
<!-- <link rel="stylesheet" href="./main.css"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 3.标签内引入 -->
<div style="color: chartreuse;">
hello world
</div>
</body>
</html>
main.css
div{
color: blue;
}
优缺点:
- head引入:在请求页面时,将css样式也请求了下面,不需要额外请求http,节省资源
- 外部引入:增加http请求数量,css样式可以重复用于多个页面,便捷
- 标签内引入:权重高,css样式优先级最高,不利于维护
二 CSS选择器
选择器{
样式1;
样式2;
.....
}
1.ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- ID选择器来控制-->
<style>
#main{
color: chartreuse;
background: chocolate;
}
</style>
</head>
<body>
<!--
id选择器
选中单个元素
定位选择器选中单个元素
-->
<!--元素的ID要唯一-->
<div id="main">
hello world
</div>
</body>
</html>
2.类选择器
改变多个元素的样式时,可以使用类选择器
.类名{ 样式1; 样式2; ... }
<xxx class = "类名"></xxx>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 类选择器
.类名{
样式1;
样式2;
}
-->
<style>
.yue{
color: coral;
font-size: 15px;
}
.y{
font-size: 30px;
}
.u{
color: red;
}
</style>
</head>
<body>
<div class="y">
<span>11</span>
<span>22</span>
<span>33</span>
<span>44</span>
<span>55</span>
</div>
<!-- class可以进行加法操作 用空格表示 -->
<div class="y u">
yueyue <!-- 字体变成30px,red红色 -->
</div>
<div class="yue">11111</div>
</body>
</html>
3.标签名选择器
使用标签名选择器可以让多个同名元素,改变其样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 类选择器
.类名{
样式1;
样式2;
}
-->
<!-- #aa ID选择器在前,控制标签span样式-->
<style>
#aa span{
color: darkorange;
font-size: 12px;
}
.y span{
color: darkred;
}
.yue{
color: coral;
font-size: 15px;
}
</style>
</head>
<body>
<span>11</span>
<!-- div嵌套span标签,控制div标签ID可以使span进行变化-->
<div id="aa">
<span>11</span>
<span>22</span>
<span>33</span>
<span>44</span>
<span>55</span>
</div>
<div class="y">
<span>11</span>
<span>22</span>
<span>33</span>
<span>44</span>
<span>55</span>
</div>
</body>
</html>
4.后代选择器
包含选择器
继承关系
h1 em {color:red;} /*只希望em标签颜色变红 */
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
5.群组选择器
多个选择器有相同样式时,可以进行提取公共部分
<style>
/* 公共代码 */
#product div,#product span,#product p{
font-family: "宋体";
}
#product div{
font-size: 16px;
}
#product span{
font-size: 15px;
color:silver;
}
#product p{
font-size: 14px;
color:orangered;
}
</style>
三 CSS优先级
当多个选择器选择同一元素时,使用共同样式时,涉及了css的优先级问题
| 选择器 | 权重 | 描述 |
|---|---|---|
| style = “” | 1000 | 标签内引入 |
| id | 100 | ID选择器 |
| .class | 10 | 类选择器 |
| tag | 1 | 标签 |
| !important | 最高 |
继承过后属性权重变为0.1,比1低
权重越大,优先级越高,权重可以进行加法提升优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 组合选择器
--style是1000
-- id选择器权是100
-- 普通标签是1
-->
<style>
/* 权101 */
#main span{
color: darksalmon;
}
/* 权110 */
#main .test{
color: darkturquoise;
}
</style>
</head>
<body>
<div id="main">
<span class="test">hello</span>
</div>
</body>
</html>
四 CSS基础样式
css 样式具有继承性。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* 继承过来的权比1小
span继承过来的div的权变成了0.1*/
#main{
font-size: 20px;
}
span{
font-size:14px;
}
</style>
</head>
<body>
<div id="main">
hello<span>world</span>
</div>
</body>
</html>
常用的文字,背景,元素设置
1.font-family: 设置字体名称
2.font-size: 设置字体大小.单位有 px|百分比|em|rem。主流浏览器默认的字体大小 16px
3.font-style:设置字体风格
normal:正常风格，默认值。
italic:斜体
4.color:用于设置文本的颜色。
十六进制:#000000(黑色) #FFFFFF(白色)
rgb 三元色:rgb(red,green,blue) 取值范围 [0,255]
5.text-decoration:文本的修饰
none:文本无修饰
underline:下划线
6.line-height 本意用于设置行高，支持负值。
当容器高度与行高一致时,文本处于垂直居中
7.text-indent:文本缩进
px:具体像素
%:百分比相对于容器的宽度。
em:一个单位,相对于该元素的字体大小。
8.text-align:文本的水平对齐方式
left:左对齐，默认值
center:居中对齐
right:右对齐
只对块容易,块元素有效,行内元素无效
9.background-color:背景颜色
10. background-image:设置背景图片。通过 url(“图片地址”) 图片默认平 铺。
11. background-repeat: 背景是否平铺
repeat:水平和垂直方向都平铺，默认值。
no-repeat:不平铺
repeat-x:水平平铺
repeat-y:垂直平铺
11.background-position:背景图定位
background-position:x 轴 y 轴
适用于精灵图等
#main{
font-family: "微软雅黑","宋体","Arial";
font-size: 20px;
}
display: 用于设置元素的呈现方式。也即元素以块元素呈现还是以行内元素呈现。
none:元素不呈现，在页面不在位置。
inline:以行内元素呈现 block:以块元素呈现
inline-block:以行内元素呈现，但具有块特性(能设置宽高)。
五 盒模型
box model
Margin(外边距):盒子和盒子之间的间距。
Border(边框):边框的粗细
Padding(内边距):内容和边框之间的宽高
Content(内容):内容的宽高
margin
块元素在margin 4个方向都可以有良好效应
margin: 0 auto 可以让块元素/块容器在其容器中水平方向居中 //垂直无效
/* 上-右-下-左 顺时针*/
margin:10px 20px 30px 40px;
margin塌陷
两个 margin 在垂直方向上会出现塌陷,以塌陷结果大的为主
元素包含关系的 margin 塌陷，以大 margin 为主，但统一塌陷到外部
margin表现
块元素4个方向都可以
行内元素左右方向可以,垂直方向无效
padding
/* 上-右-下-左 顺时针*/
padding: 10px 20px 30px 40px;
padding表现
块元素4个方向都可以
行内元素左右方向可以,垂直有效但是不好
5356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
