CSS样式

最新推荐文章于 2022-07-15 17:56:02 发布

kingeric

最新推荐文章于 2022-07-15 17:56:02 发布

阅读量251

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/kingeric/article/details/81775497

版权

html+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

掌握CSS样式规则，能够书写规范的CSS样式代码。
掌握CSS字体样式及文本外观属性，能够控制页面中的文本样式。
掌握CSS复合选择器，可以快捷选择页面中的元素。
理解CSS层叠性、继承性与优先级，学会高效控制网页元素。

##CSS样式规则
CSS 规则由两个主要的部分构成：选择器，声明。
#####选择器 {声明1; 声明2; … 声明n}

选择器：您需要改变样式的 HTML 元素
声明：设置选定HTML元素的样式，声明由属性和属性值构成，以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分

这里写图片描述
提示：请使用花括号来包围声明

##引入CSS样式表
CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。
#####1.行内样式
使用style属性引入CSS样式（这种方式没有体现出CSS的优势，不推荐使用）。例如：

<!--使用行内样式引入CSS-->
<h1 style="color:red;">Leaping Above The Water</h1>
 <p style="color:red;font-size:30px;">我是p标签</p>

2.内部样式表

在style标签中书写CSS代码。style标签写在head标签中，缺点是对于一个包含很多网页的网站，在每个网页中使用嵌入式，进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。例如：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>内部样式表</title>
  <!--使用内部样式表引入CSS-->
  <style type="text/css">
    div{
        background: green;
    }
  </style>
</head>
<body>
     <div>我是DIV</div>
</body>
</html>

3.外部样式表

CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
1、链接式

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2、导入式

<style type="text/css">
  @import url("css文件路径");
</style>

例如：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>外部样式表</title>
  <!--链接式:推荐使用-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
  <!--导入式-->
  <style type="text/css">
    @import url("css/style.css");
  </style>
</head>
<body>
     <ol>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器
###标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标记指定统一的CSS样式。例如：

CSS定义

h2 {color: red;}
p {font-size: 30px; backgroud-color: gray;}

在HTML中应用类样式

<h2>站长是个大傻瓜</h2>
<p>大傻瓜，爱吃大西瓜</p>

以上css代码会对所有h2元素设置红色,所有p元素字体大小设置为30像素同时添加灰色背景；。

###类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名。例如：
CSS定义

.myClass {color: red;}

在HTML中应用类样式

<h3 class="myClass">大傻瓜，爱吃大西瓜</h3>
<h3>大傻瓜，爱吃大西瓜</h3>
<p class="myClass">大傻瓜，爱吃大西瓜</p>

以上css代码会对应用了myClass的标签设置为红色，即第一个h3和p标签，第二个h3不受影响

id选择器

id选择器使用“#”进行标识，后面紧跟id名。例如：
CSS定义

#xy {color: blue;}

在HTML中应用类样式

<h3 id="xy">大傻瓜，爱吃大西瓜</h3>
<h3>大傻瓜，爱吃大西瓜</h3>

以上css代码会对id为xy的标签设置为蓝色。

注意：整个页面所有标签的id不能重复，即id具有唯一性。

通配符选择器

通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。例如：
CSS定义

* {color: green;}

在HTML中应用类样式

<h3>大傻瓜，爱吃大西瓜</h3>
<p>大傻瓜，爱吃大西瓜</p>

以上css代码显示效果：所有标签的文字都是绿色。

#CSS控制文字属性

font-size 设置字号

#k2{font-size:36px;}

该属性的值可以使用相对长度单位，也可以使用绝对长度单位

单位	描述
%	百分比
in	英寸
cm	厘米
mm	毫米
em	1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。
ex	一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt	磅 (1 pt 等于 1/72 英寸)
pc	12 点活字 (1 pc 等于 12 点)
px	像素 (计算机屏幕上的一个点)

color 设置字体颜色

#k2{color:'#ff0000';}

用于定义文本的颜色，其取值方式有如下4种

单位	描述
(颜色名)	颜色名称 (比如 red)
rgb(x,x,x)	RGB 值 (比如 rgb(255,0,0))
rgb(x%, x%, x%)	RGB 百分比值 (比如 rgb(100%,0%,0%))
#rrggbb	十六进制数 (比如 #ff0000)

#####font-family 设置字体类型

#k2{font-family:'Times New Roman','微软雅黑';}

网页中常用的字体有宋体、微软雅黑、黑体，如定义多个字体，用逗号隔开。

超过14px的字体类型建议使用微软雅黑和黑体

#####font-style 设置字体样式

#k2{font-style:'italic';}

该属性设置使用斜体、倾斜或正常字体。可能的值

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

font-weight 设置字体的粗细

#k2{font-weight :'bold';}

该属性用于设置显示元素的文本中所用的字体加粗，可能值如下：

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100，200，300，400，500，600，700，800，900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

text-decoration 修饰文字

#k2{font-decoration :'underline';}

这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。可能值如下：

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

#CSS控制文本属性

line-height 定义文本行高

#k2{line-height:80px;}

属性设置行间的距离（行高）

该属性会影响盒布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

text-align 定义文本水平对齐方式

#k2{line-align:'center';}

该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。可能得值如下：

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

text-indent 文本缩进

#k2{line-indent :20px;}

text-indent 属性规定文本块中首行文本的缩进

white-space 空白处理

#k2{line-space:nowrap;}

设置如何处理元素内的空白。可能值：

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

#CSS控制背景
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。所有的背景属性都不能继承。

background-color 背景色

#h2{background-color:'#ff0000';}

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

background-image 背景图像

.flower{background-image: url(tp.gif);}

要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值

background-repeat 背景重复

.flower{
    background-image: url(tp.gif);
    background-repeat: none-repeat;
}

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。可能的值：

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

background-position 背景定位

.flower{
    background-image: url(tp.gif);
    background-repeat: none-repeat;
    background-position:50px 0;
}

可以利用 background-position 属性改变图像在背景中的位置。为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

background-position属性需要 2 个参数值，第一个值用于横坐标，第二个值用于纵坐标，默认值为 0% 0%，即背景图像的左上角与对象背景区域的左上角对齐。如果只提供一个值，则用于 x 轴方向，y 轴方向使用默认值 center，即垂直居中

#CSS复合选择器

#####1. 交集选择器
交集选择器使用的方法是其中一个为HTML的标签,另外一个是类选择器。
其中第一必须是标记选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写。

<head>
    <style>
    p.one{color:'#FF0000';}
    </style>
</head>
<body>
    <p class="one" > 123</p>
    <div class="one" > 456</div>
</body>

显示结果是：123变成红色，456不受影响

2. 并集选择器

多个选择器用逗号分开,所有选择器都能实现后面的样式

<head>
    <style>
    p.one,div{color:'#FF0000';}
    </style>
</head>
<body>
    <p class="one" > 123</p>
    <div> 456</div>
</body>

显示结果是：123和456都变成红色

3. 后代选择器

外层的标签写在前面,内层标签写在后面。首先我们先来了解DOM（文档对象模型）树，
这里写图片描述
比如body就是html的子元素。一级一级一直下来。html是所有的祖先元素。

<head>
    <style>
    div p{color:'#FF0000';}
    </style>
</head>
<body>
    <div> <p>123</p> </div>
    <p>456</p>
</body>

显示结果是：123变成红色，456不受影响

4. 子元素选择器

外层的标签写在前面,内层标签写在后面 ,中间用 > 符号表示父子关系。

<head>
    <style>
    div>p{color:'#FF0000';}
    </style>
</head>
<body>
    <div>
      <p>123 
         <p>456</p>
      </p>
    </div>
</body>

显示结果是：123变成红色，456不受影响

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素

#CSS层叠性与继承性

#####继承性

所谓继承，就是父元素的规则也会适用于子元素。比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置，也都会变成红色。

<head>
    <style>
    div{color:'#FF0000';}
    </style>
</head>
<body>
    <div> <p>123</p> </div>
    <p>456</p>
</body>

显示结果是：123变成红色，456不受影响，因为123继承了父节点 div 的css样式。

多数边框类属性，比如象Padding（补白），Margin（边界），背景和边框的属性都是不能继承的。border属性是用来设置元素的边框的，它没有继承性。

层叠特性

层叠特性可以简单的理解为“冲突”的解决方案，叠：样式叠加。

<head>
    <style>
    p{color:'#FF0000';font-size:36px;} /*红色，字号36px*/
    p{color:'#0000FF';} /*绿色*/
    </style>
</head>
<body>
    <p id="md">456</p>
</body>

最终显示的将是绿色，36px的文字。至于为什么是绿色，而不是红色。这个涉及到css样式的优先级别，我们在下一讲再讲解。

#CSS优先级别

优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的 **数值 **决定。

而当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。
当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

下列是一份优先级逐级增加的选择器列表：

通用选择器
元素（类型）选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式

多重样式

如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。
一般情况下，优先级为：（外部样式） <（内部样式） <（内联样式）
有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

<head>
   <style type="text/css">
     h3{color:green;}
   </style>
</head>
<body>
    <h3 style="color:red">welcome sojson.com</h3>
</body>

结果：显示的是红色

选择器的优先权

这里写图片描述

内联样式表的权值最高 1000。
ID 选择器的权值为 100。
Class 类选择器的权值为 10。
HTML 标签（类型）选择器的权值为 1。

<head>
    <style>
    #md{color:'#FF0000';font-size:36px;} /*红色，字号36px*/
    p{color:'#0000FF';} /*绿色*/
    </style>
</head>
<body>
    <p id="md">456</p>
</body>

最终显示的将是红色，36px的文字。

#####例外的 !important 规则

当在一个样式声明中使用一个!important 规则时，此声明将覆盖任何其他声明。虽然技术上!important与优先级无关，但它与它直接相关。

使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

CSS 优先级规则

选择器都有一个权值，权值越大越优先。

当权值相等时，后出现的样式表设置要优于先出现的样式表设置。
创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式。
继承的CSS 样式不如后来指定的CSS 样式
在同一组属性设置中标有“!important”规则的优先级最大。

#CSS伪类
CSS伪类是用来添加一些选择器的特殊效果。它非内容信息，指的是一些对内容进行修饰的信息。
伪类以:开头。
伪类的语法：
#####选择器:伪类 {声明}

<head>
    <style>
    p:first-child{background-color:yellow;} 
    </style>
</head>
<body>
  <p>天净沙·秋思</p>
  <p>元代：马致远</p>
  <div>
    <p>枯藤老树昏鸦</p>
    <p>小桥流水人家</p>
    <p>古道西风瘦马</p>
    <p>夕阳西下</p>
    <p>断肠人在天涯</p>
  </div>
</body>

结果：“天净沙·秋思” 和 “枯藤老树昏鸦” 为黄色背景，其他不受影响

常见伪类

选择器	示例	示例说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的元素
:lang(language)	p:lang(it)	为元素的lang属性选择一个开始值

案例：设置页面中的超级链接

<head>
    <style>
    a{text-decoration:none} /*a标签默认情况下会存在下划线，现设置为没有*/
    a:link{color:#ff0000;} /*未访问链接是红色*/
    a:visited{color:#99999;}/*已访问链接是灰色*/
    a:actived{color:#00ff00;}/*正在访问链接是蓝色*/
    a:hover{color:#0000ff;}/*鼠标悬停是绿色*/
    </style>
</head>
<body>
  <p>天净沙·秋思</p>
  <p><a href="http://www.baiud.com/">元代：马致远</a></p>
  <div>
    <p>枯藤老树昏鸦</p>
    <p>小桥流水人家</p>
    <p>古道西风瘦马</p>
    <p>夕阳西下</p>
    <p>断肠人在天涯</p>
  </div>
</body>

超级链接伪类的4种状态设置必须有先后顺序，分别为： link，visited，actived，hover。

#CSS伪元素
伪元素表示了某个元素的子元素。这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
因为伪元素并不在文档树中，所以通过JS，也抓取不到伪元素，也不能给它绑事件。

伪元素以::开头。
在CSS1和CSS2中，伪元素和伪类一样，都是用:开头。但在CSS3中，伪元素以::开头，用以和伪类进行区分。但是一般情况下为了兼容IE8，我们统一使用:开头。

注意伪元素跟伪类的区别：伪元素是真实显示在页面上的元素，伪类不作为元素，仅仅作为其他元素的修饰作用。

常见伪元素

选择器	示例	示例说明
:first-letter	p:first-letter	选择每个元素的第一个字母
:first-line	p:first-line	选择每个元素的第一行
:before	p:before	在每个元素之前插入内容
:after	p:after	在每个元素之后插入内容

案例：设置伪元素

<head>
    <style>
    div:before{
        content:'小明';
    }
    </style>
</head>
<body>
  <div>
    <p>是个大傻瓜</p>
  </div>
</body>

运行后，在浏览器中按F12进入开发者工具可查看到如下结果

<div>小明
    <p>是个大傻瓜</p>
  </div>

#CSS列表样式

列表会经常应用在网页中，其css样式属性有

list-style-type 列表项前面的标识符号

–值--	CSS版本	说明
disc	CSS1	默认值。实心圆
circle	CSS1	空心圆
square	CSS1	实心方块
decimal	CSS1	阿拉伯数字
lower-roman	CSS1	小写罗马数字
upper-roman	CSS1	大写罗马数字
lower-alpha	CSS1	小写英文字母
upper-alpha	CSS1	大写英文字母
none	CSS1	不使用项目符号
armenianl	CSS2	未支持。传统的亚美尼亚数字
cjk-ideographic	CSS2	未支持。浅白的表意数字
georgian	CSS2	未支持。传统的乔治数字
lower-greek	CSS2	未支持。基本的希腊小写字母
hebrew	CSS2	未支持。传统的希伯莱数字
hiragana	CSS2	未支持。日文平假名字符
hiragana-iroha	CSS2	未支持。日文平假名序号
katakana	CSS2	未支持。日文片假名字符
katakana-iroha	CSS2	未支持。日文片假名序号
lower-latin	CSS2	未支持。小写拉丁字母
upper-latin	CSS2	未支持。大写拉丁字母

list-style-type是应用到ul或ol上的,非li。
且ul或ol默认存在边界值和内填充值，一般情况下会考虑把margin和padding设置为0；

kingeric

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS样式

掌握CSS样式规则，能够书写规范的CSS样式代码。掌握CSS字体样式及文本外观属性，能够控制页面中的文本样式。掌握CSS复合选择器，可以快捷选择页面中的元素。理解CSS层叠性、继承性与优先级，学会高效控制网页元素。CSS样式规则CSS 规则由两个主要的部分构成：选择器，声明。选择器 {声明1; 声明2; … 声明n}选择器：您需要改变样式的 H...
复制链接

扫一扫

专栏目录