CSS小结
一、什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
二、CSS的作用
HTML 标签原本被设计为用于定义文档内容,如下实例:
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
样式表定义如何显示 HTML 元素,就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。
三、例子
3.1 简单示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {background-color:tan;}
h1 {color:maroon;font-size:20pt;}
hr {color:navy;}
p {font-size:11pt;margin-left:25px;}
a:link {color:green;}
a:visited {color:yellow;}
a:hover {color:black;}
a:active {color:blue;}
</style>
</head>
<body>
<h1>这是标题</h1>
<hr>
<p>你可以看到这个段落是
被设定的 CSS 渲染的。</p>
<p><a href="https://www.runoob.com"
target="_blank">这是一个链接</a></p>
</body>
</html>
3.2 id 和 class 选择器
3.2.1 id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“para1”:
<style>
#para1
{
text-align:center;
color:red;
}
</style>
<body>
<p id="para1">Hello World!</p>
</body>
注: ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
3.2.2 class 选择器
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。
.center
{
text-align:center;
}
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:
p.center {text-align:center;}
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
四、CSS样式
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
多重样式优先级如下:
内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
各种样式的用法如下:
<head>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 设置:h3{color:blue;} -->
<style type="text/css">
/* 内部样式 */
h3{color:green;}
</style>
</head>
<body>
<h3>测试!</h3>
/* 内联样式 */
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
</body>
五、CSS各种类型定义
属性 | 说明 | 类型 |
---|---|---|
backgrounds | 背景 | background-color背景颜色 background-image背景图像 background-repeat背景图像定位与平铺设置 background-attachment背景图像是否固定或者随着页面的其余部分滚动 background-position设置背景图像的起始位置 |
text | 文本 | color:red; 文本颜色 text-align:center;本文对齐方式 text-decoration:line-through; 文本修饰 text-transform:uppercase;文本转换 text-indent:50px;文本缩进 |
fonts | 字体 | font-family:“Times New Roman”, Times, serif;字体系列 font-style:normal;字体样式 font-size:40px;字体大小 |
link | 链接 | a:link {color:#000000;} 未访问链接 a:visited {color:#00FF00;} 已访问链接 a:hover {color:#FF00FF;} 鼠标移动到链接上 a:active {color:#0000FF;} 鼠标点击时 |
ul | 列表样式 | list-style-type 列表项标志的类型 list-style-position 列表中列表项标志的位置 list-style-image 将图象设置为列表项标志 |
table | 表格 | border: 1px solid black; 表格边框 border-collapse:collapse; 折叠边框 width:100%;height:50px; 表格宽度和高度 text-align:right; 表格文字对齐 padding:15px; 表格填充 |
属性 | 说明 | 类型 |
---|---|---|
Box Model | 盒子模型 | Margin(外边距) - 清除边框外的区域,外边距是透明的 Border(边框) - 围绕在内边距和内容外的边框 Padding(内边距) - 清除内容周围的区域,内边距是透明的 Content(内容) - 盒子的内容,显示文本和图像 |
Margin | 外边距 | margin:25px 50px 75px 100px 上右下左 |
Border | 边框 | border-style:dotted solid double dashed;上右下左 border-style:dotted solid double; 上 左右 下 border-style:dotted solid; 上下 左右 border-style:dotted;四边全部 |
padding | 填充 | 同上 |
outline | 轮廓 | 绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用 |
属性 | 说明 | 类型 |
---|---|---|
Overflow | 控制内容溢出元素框时显示的方式 | visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 inherit 规定应该从父元素继承 overflow 属性的值 |
六、css的应用
6.1 分组和嵌套选择器
6.1.1 分组选择器
在样式表中有很多具有相同样式的元素。
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
为了尽量减少代码,你可以使用分组选择器。
每个选择器用逗号分隔。
在下面的例子中,我们对以上代码使用分组选择器:
h1,h2,p
{
color:green;
}
6.1.2 嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式:
p{ }
: 为所有 p 元素指定一个样式。.marked{ }
: 为所有 class=“marked” 的元素指定一个样式。.marked p{ }
: 为所有 class=“marked” 元素内的 p 元素指定一个样式。p.marked{ }
: 为所有 class=“marked” 的 p 元素指定一个样式。
实例
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;
}
参考:
https://www.runoob.com/css/css-intro.html