1 定义
CSS Cascading Style Sheets层叠样式表,定义如何显示HTML元素(长宽高、颜色、间距、背景等展示效果)
2 基本语法
p {//选择器
color: red;//属性:值
font-size: 14px;//属性:值
}
选择器:声明哪个元素采用这个样式表,选择器可以是标签、class、id和属性
属性:样式属性
值:属性对应的值
3 选择器分类
3.1 上下文选择器(派生选择器)
通过依据元素在其位置的上下文关系来定义样式。
分类:
后代选择器
tr td { color: pink;}
子元素选择器
a>img { width:200px;}
相邻兄弟选择器
h1+p { padding: 5px;}
3.2 类选择器
类选择器用于描述一组元素的样式,在标签中声明class属性,通过选择class属性来声明样式表的适用范围。
多个标签可以共用一个class值。一个标签的class属性也可以有多个值。
使用class属性作为选择器,需要在class的值前面加点号.
示例:
<p class="c1" >hello </p>
<p class="c1 c2 c3" >world!!!</p>
.c1 {
font-size: 20px;
}
3.3 ID选择器
id选择器可以为标有特定id的HTML元素指定样式;
每一个标签的id属性值必须是唯一的;
使用id选择器,需要在id属性值前面加#号;
示例:
<p id="i1">你好</p>
#i1{
font-size: 30px;
font-weight: 10;
color: #008000;
}
3.4 属性选择器
对带有指定属性的HTML元素设定样式;
主要应用在表单元素中;
示例:
input[type=text]{//input标签中的文本框
color: red;
}
4 引入样式
4.1 内联样式
<p style="padding: 10px;">内联样式</p>
4.2 内部样式表
<head>
<!-- 内部样式表 -->
<style>
p {
font-family: '宋体';
font-size: 50px;
color: red;
}
</style>
</head>
4.3 外部样式表(CSS文件)
<head>
<!-- 引入外部样式表:css文件 -->
<link rel="stylesheet" type="text/css" href="../../css/main.css" />
</head>
4.4 样式加载优先级
样式级别由高到低:
内嵌样式 > 内部样式表 > css文件(外部样式表)
如果有相同的样式属性,优先加载级别更高的样式
5 CSS盒子模型
如果把一个H5元素看成一个盒子,则盒子的全部组成如下图所示:
外边距:元素与其他元素之间的距离;
内边距:元素边框与内容之间的距离;
内容:标签中包含的文本、图片等;
5.1 外边距margin
margin | 设置所有(上下左右)外边距的属性 | margin: 10px; |
---|---|---|
margin-top | 设置元素的上外边距 | |
margin-left | 设置元素的左外边距 | |
margin-right | 设置元素的右外边距 |
margin缩写用法:
同样适用于padding;
从上边距开始,顺时针旋转设置(上右下左);
margin: 25px 50px 75px 100px;
上边距25px
右边距50px
下边距75px
左边距100px
margin: 25px 50px 75px;
上边距25px
左右边距50px
下边距75px
margin: 25px 50px;
上下边距25px
左右边距50px
margin: 25px;
所有边距25px
5.2 边框border
border | 设置整个边框的属性 | border: 1px solid #FFO; border: 粗细 边框类型 颜色 solid实线 dashed虚线 |
---|---|---|
border-width | 设置边框宽度(粗细) | border-width: 1px; |
border-color | 设置边框颜色 | |
border-style | 边框样式(虚线、实线) | border-style: dashed/solid |
border-top | 设置上边框样式 | border-top: 1px solid #FFO; |
border-top-width | 设置上边框宽度 | |
border-top-color | 设置上边框颜色 | |
border-top-style | 设置上边框样式 |
5.3 文本样式
font | 设置所有的字体属性 | |
---|---|---|
font-family | 设置字体 | |
font-size | 设置字体大小 | |
font-style | 设置字体样式 | normal正常的字体(默认字体样式,可用于去掉html i斜体标签默认斜体样式) italic斜体。对于没有斜体变量的特殊字体,将应用oblique oblique倾斜的字体 |
font-weight | 设置字体粗细 | font-weight: normal/bold/300; |
示例:
.title{
font: italic bold 12px/30px Georgia, serif;
//斜体 加粗 字体大小 字体名称
}
6 背景设置
background | 设置背景全部属性 | |
---|---|---|
background-attachment | 背景图像是否固定或随页面的其余部分滚动 | background-attachment:fixed; |
background-color | 背景色 | background-color:#FF0; |
background-size | 背景图尺寸 | background-size: 100%; |
background-image | 设置背景图 | background-image:url(…/img/bg.jpg); |
background-position | 设置背景图的起始位置 | 空格分隔X轴和Y轴坐标 background-position: top center; background-position:-24px 210px; |
backgrount-repeat | 设置背景图像是否重复 | background-repeat: no-repeat; |
7 CSS定位
7.1 position属性定位
值 | 描述 |
---|---|
fixed固定定位 | 参照物:浏览器 脱离DOM流,不占据空间 常用作漂浮广告,返回顶部等特效样式 这种定位方式是相对于整个文档的, 需设置它相对于各个方向的偏移值, 可以将该元素固定在页面固定的位置; |
relative 相对定位 | 参照物:自身 存在DOM流中,占据原先的空间 该定位可以通过设置top/bottom/left/right等值,使得指定元素相对其正常的位置进行偏移,这种定位不脱离文档流 |
static 静态定位 | HTML元素的默认值,没有定位,元素出现在正常的流中; 也就是按照文档的书写布局自动分配在一个合适的地方; 这种定位方式用margin来改变位置,对top/bottom/left/right/z-index等设置值无效,这种定位不脱离文档流; |
absolute 绝对定位 | 参照物:最近的已定位(fixed/relative/absolute)祖先元素 如果没有已定位的祖先元素,那么他的位置相对于<html>或<body> 脱离DOM流,不占据空间 这种定位通过top/right/bottom/left等属性设置偏移值 |
示例:
<style type="text/css">
h2{
position: absolute;
left:100px;
top:150px
}
</style>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。</p>
</body>
7.2 overflow属性
overflow 属性规定当内容溢出元素框时发生的事情
值 | 描述 | 示例 |
---|---|---|
visible | 默认值,内容不会被修剪,会呈现在元素框之外 | |
hidden | 内容会被修剪,并且其余内容是不可见的 | overflow: hidden; |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容 | overflow: scroll; |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 | |
inherit | 继承父类元素的overflow属性值 |
示例:
<style type="text/css">
div {
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll;
}
</style>
<body>
<p>
如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。
</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
7.3 z-index属性
1)z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面或后面)
2)值越大,越靠前
3)没有指定z-index,后面的元素压住前面的元素
值 | 描述 | 示例 |
---|---|---|
number | 根据数字确定堆叠顺序,值越大,越靠前 | z-index: 999; |
auto | overflow: auto; | |
inherit | 继承父元素的z-index属性值 | overflow: inherit; |
7.4 top/bottom/left/right属性
定位一个元素的上外边距与其包含块上边框之间的偏移量。
top: 10%; //元素向下移动10%
left: -10px; //元素向左移动10像素
8 CSS显示
8.1 display属性
值 | 描述 |
---|---|
none | 此元素不会被显示 |
block | 此元素将显示为块级元素,此元素前后会带有换行符 |
inline | 默认值,此元素会被显示为内联元素 |
inline-block | 行内块元素 |
table | 此元素会作为块级表格来显示(类似table标签),表格前后带有换行符 |
table-row | 此元素会作为一个表格行显示(类似tr) |
table-cell | 此元素会作为一个表格单元格显示(类似td和th) |
inherit | 继承父元素的display属性的值 |
8.2 visibility属性
值 | 描述 |
---|---|
visible | 默认值,元素是可见的 |
hidden | 元素不可见,但是原有的位置还存在 |
collapse | 在表格元素中使用,此值可以删除一行或一列,但是不会影响表格布局; 被行和列占据的空间会留给其他内容使用; 此值在其他元素中使用,等效于hidden; |
inherit | 继承父元素的visibility属性的值 |
9 CSS伪类
伪类用于定义元素的特殊状态。(也叫触发事件)
例如,它可以用于:
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
:link | 选择未访问的链接时 | a:link |
---|---|---|
:visited | 选择访问过的链接时 | a:visited |
:hover | 鼠标悬停状态(鼠标悬停事件) | a:hover |
:active | 选择正在活动的链接时 | |
:focus | 获得焦点时的状态(获得焦点事件) | input:focus |
:first-letter | 选择每个p标签的首字母 | p:first-letter |
:first-line | 选择每个p标签的第一行 | |
::before | 在每个p标签之前插入内容 | p::before{ content: "hi "; } |
::after | 在每个p标签之后插入内容 | |
:lang(language_code) | 为元素的lang属性选择一个初始值 | p:lang(en) |
示例:当鼠标放在图片上悬停时,修改图片尺寸
img:hover{
width: 200px;
height: 200px;
}
<img src="../../img/icon.jpg" width="100px" height="100px" />
HTML的lang属性可用于声明网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的;
示例:
<html lang="en"></html>
<p lang="zh"></p>
10 CSS浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框(父级框元素)或另一个浮动框为止。
如果元素设置了浮动,后面紧邻的元素则会受到浮动的影响,若要不受影响,则要在后面清除浮动(可用clear:both;等方法),在两个相邻元素设置相同浮动的情况下,两元素将按顺序相邻摆放。这种定位使得元素脱离DOM文档流。
如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。
特点:
1设置元素浮动,元素相当于上移一个图层;.
2.设置元素浮动,元素会具有内联元素的特性,即跟其他相邻元的浮动元素在同一行
属性 | 描述 | 值 |
---|---|---|
clear | 指定不允许元素的哪一侧有浮动元素 | left right both 两边 none inherit |
float | 指定一个盒子(元素)是否浮动 | left right none inherit继承父元素 |
示例:
<html>
<head>
<style>
div{
border: 0px solid #000000;
width: 100px;
height: 100px;
margin: 5px;
color: white;
}
</style>
</head>
<body>
<div style="float: left; background-color: black;">1</div>
<div style="float: left; background-color: red;">2</div>
<div style="float: left; background-color: blue;">3</div>
</body>
</html>