CSS样式表详解-优快云博客

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