CSS样式

CSS样式

学号：201631062509

姓名：杨菓

1.什么是 CSS?

  • CSS 指层叠样式表 (Cascading Style Sheets)

  • 样式定义如何显示 HTML 元素

  • 样式通常存储在样式表中

  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

  • 外部样式表可以极大提高工作效率

  • 外部样式表通常存储在 CSS 文件中

  • 多个样式定义可层叠为一

  • 样式对网页中元素位置的排版进行像素级精确控制

样式层叠

样式层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。

样式层叠次序

当同一个 HTML 元素定义了多个样式时，应该使用哪个样式？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

总而言之，HTML用于定义内容的结构和语义，CSS用于设计风格和布局。比如使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS颜色写法

CSS 颜色值的写法

在描述颜色的时候，除了使用英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：    

p { color: #ff0000; }

为了节约字节，我们可以使用 CSS 的缩写形式：    

p { color: #f00; }

我们还可以通过两种方法使用 RGB 值：

p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); }

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
p
{
 color:red;
 text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
运行结果：

2.选择器

通配选择器：

        *{ }  PS可能带来意想不到的结果

多类选择器：

        被选择的元素可以包含多类选择器所列之外的类，但必须同时包括所列类

属性选择器：

        简单属性选择器：

              * / 元素名 [属性名]{ }  选择包含某个属性的元素

后代选择器：

　　Father child { }：可以用于为同类元素设置不同的样式

子元素选择器：

　　Father > child {}  直接后代

选择相邻兄弟元素：

　　选择紧接在另一个元素之后的元素 ： 元素1 + 元素2 {}

伪类选择器：

　　静态伪类

　　动态伪类

2.CSS 创建

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。

如何插入样式表

插入样式表的方法有三种:

  • 外部样式表
  • 内部样式表
  • 内联样式

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}          
p {margin-left:20px;}           
body {background-image:url(/images/back40.gif);}  
Remark不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：       

h3           
{           
color:red;           
text-align:left;           
font-size:8pt;           
}   

而内部样式表拥有针对 h3 选择器的两个属性：      

h3           
{           
text-align:right;           
font-size:20pt;           
}   

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：       

color:red; text-align:right;          
font-size:20pt;  

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 head 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

Remark提示:如果你使用了外部文件的样式在内部样式中也定义了该样式，则内部样式表会取代外部文件的样式。

多重样式优先级深入理解

优先级用于浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。

优先级仅由选择器组成的匹配规则决定的。

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

多重样式优先级顺序

下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：

  1. 通用选择器（*）
  2. 元素(类型)选择器
  3. 类选择器
  4. 属性选择器
  5. 伪类
  6. ID 选择器
  7. 内联样式

!important 规则例外

当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

一些经验法则：

  • Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
  • Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
  • Never 永远不要在全站范围的 css 上使用 !important
  • Never 永远不要在你的插件中使用 !important

权重计算:

201712181559548677

以下是对于上图的解释：

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

利用选择器的权值进行计算比较，em 显示蓝色，我们提供了详细的代码参考：   

<html>   

<head>   

<style type="text/css">   

#redP p {   

/* 权值 = 100+1=101 */   

color:#F00;  /* 红色 */   

}   

#redP .red em {   

/* 权值 = 100+10+1=111 */   

color:#00F; /* 蓝色 */   

}   

#redP p span em {   

/* 权值 = 100+1+1+1=103 */   

color:#FF0;/*黄色*/   

}   

</style>   

</head>   

<body>   

<div id="redP">  

<p class="red">red  

<span><em>em red</em></span>   

</p>   

<p>red</p>   

</div>   

</body>  

</html>

CSS 优先级法则：

    •  A 选择器都有一个权值，权值越大越优先；
    •  B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
    •  C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
    •  D 继承的CSS 样式不如后来指定的CSS 样式；
    •  E 在同一组属性设置中标有"!important"规则的优先级最大；

3.CSS背景（Backgrounds）

CSS 背景属性用于定义HTML元素的背景。

CSS 背景属性

Property描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

4.CSS文本（Text）

所有CSS文本属性。

属性描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写 
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

5.CSS字体（Fonts）

所有CSS字体属性

Property描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

6.CSS边框（Border）

CSS 边框属性

属性描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

7.CSS定位（Positioning） 

所有的CSS定位属性

"CSS" 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。

属性说明值CSS
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 auto
length
%
inherit		 2
clip 剪辑一个绝对定位的元素 shape
auto
inherit		 2
cursor 显示光标移动到指定的类型 url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help		 2
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 auto
length
%
inherit		 2
overflow
设置当元素的内容溢出其区域时发生的事情。 auto
hidden
scroll
visible
inherit		 2
position 指定元素的定位类型 absolute
fixed
relative
static
inherit		 2
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 auto
length
%
inherit		 2
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 auto
length
%
inherit		 2
z-index 设置元素的堆叠顺序 number
auto
inherit		 2

8.CSS浮动（Float）

CSS 中所有的浮动属性

"CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。

属性描述值CSS
clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit		 1
float 指定一个盒子（元素）是否可以浮动。 left
right
none
inherit		 1

 9.心得总结

        这一次作业，主要是学习了CSS，如何用CSS来将网页的布局，装饰等等做得美观。这一点结合HTML，才可以做出一个合格的，便于使用的网页。所以在过后的学习中，我们应该更熟练地使用HTML和CSS来实现我们在网页上要呈现的功能和作用。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Yy-Gg/p/10564911.html