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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值