css应知应会 第一集
原创
1、注意
所有的表单控件，都为 行内块(display:inline-block) 元素
特点：多个 行内块元素 与 行内元素 和 文本 是可以在一行内显示的
================================================
CSS
1、CSS概述
1、问题
1、想设置页面所有的文本的颜色为红色
2、想设置页面中所有的 p 标记的文本颜色 为 蓝色
3、想将所有的 p 标记的颜色，更改为 粉色
在 HTML 中，想实现标记的样式，只能靠属性完成
使用属性设置页面元素样式的问题：
1、相同的样式在不同的标记中用的是不同的属性
<body text="red">
<font color="red">
2、由于属性的独立性，导致相同的操作，在不同的元素中要多次实现
<p>
<font color="pink">疑是地上霜</font>
</p>
<p>
<font color="pink">低头思故乡</font>
</p>
使用HTML元素的属性设置样式的话，无法提升元素样式的 可重用性 和 可维护性
2、什么是CSS
Cascading Style Sheets : 样式表
CSS用于HTML元素的样式的定义
能够实现内容(HTML页面元素) 与 表现(CSS展示效果)相分离
能够提升代码的可重用性 和 可维护性
3、CSS 与 HTML 之间的关系
HTML 负责搭建网页结构
CSS 负责页面的样式的设置
HTML元素属性 与 CSS样式 冲突时 使用原则 :
尽量使用 CSS 样式 来取代 HTML 属性
2、使用CSS样式表
1、内联方式
又称为 行内样式 或 行内方式
2、内部样式表
将样式内容定义在网页的 <head> 中
3、外部样式表
将样式内容定义在外部的 CSS 文件中(***.css)
在HTML页面中引入 ***.css 去使用样式内容
详解：
1、内联方式
将样式定义在HTML元素的 style 属性中
允许在 style 属性中 出现若干条的 "样式声明"
语法：
<ANY style="样式声明1;样式声明2;样式声明3;">
每一个样式声明由两部分组成：
属性名称 : 值
基本的属性 及其 值
属性名称 值
color 颜色值
background-color 颜色值
font-size 以px或pt为单位的数值
ex:
<div>静夜思</div>
设置 div 的文本颜色为 红色(red)，背景颜色为 黄色(yellow)，文字大小为 24px
2、内部样式表
将样式内容定义在 <head> 标记中，在此定义的样式，可以被页面中的多个元素同时使用
<head>
<style>
样式规则1
样式规则2
...
样式规则n
</style>
</head>
样式规则的语法：
选择器{
样式声明1;
样式声明2;
... ...
样式声明n;
}
选择器：规范了页面中哪些元素能够使用定义好的样式
元素选择器:由元素的名称来作为选择器
div{
color:red;
background-color:yellow;
}
ex:
设置页面中所有 p 标记的样式为，背景颜色为黄色，文本颜色为 红色，文字大小为 18pt
特点：
1、有效的实现了样式 和 内容的分离
2、有效的实现了 可重用性 和 可维护性
3、外部样式表
1、创建独立的 css 文件并编写样式
在 ***.css 文件中,直接编写若干"样式规则"
2、在要使用样式表的html文件中，进行样式表的引入
<head>
<link rel="stylesheet" href="样式表文件的URL">
</head>
3、CSS样式表特征
1、继承性
大部分的样式属性是可以被继承的
即在父元素中定义好的样式 可以直接被子元素使用
2、层叠性
允许为一个元素定义多个样式规则，如果样式规则中的样式属性不冲突的时候，他们则都可以被应用到元素上
3、优先级
在层叠性基础上，如果样式属性声明冲突时，会按照不同使用方式的优先级来应用样式
低 ：浏览器默认设置
中 ：内部样式表 和 外部样式表
就近原则 - 后定义者优先
高 ：内联样式
4、!important
显示调整 样式的优先级
属性名称:值 !important;
4、CSS基础选择器
1、选择器的作用
规范了页面中哪些元素能够使用声明好的样式
选择器是为了匹配页面上的元素的
2、选择器详解
1、通用选择器
作用：为了匹配页面中所有的元素
语法：* { ... }
ex:想设置页面中所有的文字的大小为12px
方案1：
*{
font-size:12px;
}
方案2：
body{
font-size:12px;
}
在网页中，推荐使用方案2的继承性来取代 通用选择器
2、元素选择器
作用：使用元素名称来充当选择器，目的是为了匹配页面中指定元素名称的所有标记
语法：元素名称 { ... }
ex:
div{ ... }
p{ ... }
ul{ ... }
3、类选择器(重难点)
作用：定义好之后，允许被任意元素的 class 属性进行引用的选择器
1、基本类选择器
语法：.类名{ ... }
引用类选择器：
<ANY class="类名">
类名规范：
1、字母，数字，_,-组成
2、不能以数字开头
ex:
<style>
.important{
font-size:24px;
color:red;
}
</style>
<div class="important">
引用了 important 的元素
</div>
2、多类选择器的引用方式：
允许让一个元素同时引用多个类选择器
多个类选择器之间，使用 空格 隔开即可
<ANY class="类1 类2 类3">
3、分类选择器的定义方式：
分类选择器，允许将类选择器和元素选择器结合起来使用，从而实现对某种元素中不同样式的细分控制
语法：
元素选择器.类选择器{ ... }
div.important{ color:green; }
以上选择器匹配的是页面中 class属性值为 important 的 div 元素
<div class="important"></div>
4、ID选择器
作用：为了匹配页面中指定ID值的元素
语法：#IDValue{ ... }
ex:
<div id="main"></div>
<style>
#main{ ... }
</style>
5、群组选择器
作用：选择器的声明，是一个以 , 隔开的选择器列表，为了定义多个选择器中的公共样式
语法：
选择器1,选择器2,选择器3{
... ...
}
ex:
#main,div.redColor,.important,.red{
color:red;
}
等同于
#main{color:red;}
div.redColor{color:red;}
.important{color:red;}
.red{color:red;}
6、后代选择器
后代：只要具备层级关系的元素，被嵌套的都可以被称之为 后代
语法：选择器1 选择器2{ ... }
1、div span{ }
匹配 所有div 中的 span 元素
2、#main span{ ... }
匹配 id为main的元素中的 所有 span元素
3、#main div.left-side{ ... }
匹配 id为mian 的元素中 class为left-side 的div元素
<div id="main">
<div class="left-side"></div>
</div>
7、子代选择器
子代：在层级元素中，只具备一层层级关系，被嵌套的元素称之为 子代元素
语法：选择器1>选择器2{}
<div>
<p>
<span></span>
</p>
</div>
p 是div的 子代元素
span 是p的 子代元素
span 是div的 后代元素
<div>
<span>div中的span</span>
<p>
<span>div 中的 p 中的 span</span>
</p>
</div>
8、伪类选择器
作用：为了匹配页面元素不同的"状态"
语法：
:伪类{ ... }
选择器:伪类{}
伪类选择器的分类：
1、链接伪类
1、:link , 匹配未被访问的超链接的状态
2、:visited,匹配访问过的超链接的状态
2、动态伪类
1、:hover,匹配鼠标悬停在元素上的状态
2、:active,匹配元素被激活时的状态
3、:focus,匹配元素获取焦点时的状态
3、目标伪类
4、结构伪类
5、否定伪类
5、尺寸 与 边框
1、CSS单位
1、尺寸单位
1、px (pixel)
2、% ：相对单位
3、pt ：磅(point)
多数用于描述 文字大小 1pt = 1/72 in
4、in ：英寸(inch)
1in=2.54cm
5、cm ：厘米
6、mm ：毫米
7、em ：字体大小，使用父元素字体大小的倍数
#main{ font-size:2em; }
8、rem ：字体大小,使用html根元素字体大小的倍数
#main{ font-size:2rem; }
2、颜色单位
1、rgb(r,g,b)
r:red (0~255)
g:green (0~255)
b:blue (0~255)
ex:
color:rgb(112,76,98);
2、rgb(r%,g%,b%)
3、rgba(r,g,b,alpha);
alpha:透明度 0~1 之间的数字
0 : 完全透明
1 : 完全不透明
4、#rrggbb
由6位十六进制的数字来组成的颜色
十六进制：0~9 A~F 组成
#123456;
#654321;
#aabbcc;
#e4393c;
5、#rgb
#rgb 是 #rrggbb的缩写
#rrggbb每两位数字都相同的情况下，可以使用#rgb的方式取代
#112233 -> #123;
#ff0000 -> #f00
6、表示颜色的英文单词
red,green,blue,yellow,pink,purple,
2、尺寸属性
1、页面元素的默认尺寸
块级：
宽度：占父元素宽度的 100%
高度：以内容为准
行内：
宽度：以内容为准
高度：以内容为准
2、尺寸属性
1、宽度
width
min-width
max-width
2、高度
height
min-height
max-height
3、在HTML中，允许设置尺寸属性的元素
1、所有的块级元素 全部都可以设置
2、行内块中的大部分元素可以设置
除 radio 和 checkbox 以外的行内块元素
3、HTML元素本身就具备 width 和 height属性的可以设置尺寸，其余则不可以
<img> 可以设置尺寸
<table> 可以设置尺寸
特殊：除<img>以外的其它行内元素时不允许设置尺寸的
4、溢出
1、什么是溢出
使用尺寸属性设置元素大小时，如果内容所需要的空间大于元素空间大小时，则会产生溢出的效果
2、溢出处理属性
属性：
overflow
overflow-x
overflow-y
取值：
1、visible
默认值，溢出可见
2、hidden
隐藏
3、scroll
显示滚动条，但是溢出时可用
4、auto
3、边框属性
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。