CSS相关

CSS相关
2019/01/15 Chenxin

参考: http://www.runoob.com/css/css-syntax.html

通过使用 CSS 我们可以大大提升网页开发的工作效率!使用 CSS 同时控制多重网页的样式和布局。
什么是 CSS?CSS 指层叠样式表 (Cascading Style Sheets)

语法说明 (选择器,属性,值)
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。在这个例子中,
h1 { color:red; font-size:14px; }
h1 是选择器,color 和 font-size 是属性,red 和 14px 是值. color:red;叫做一个声明.
CSS声明总是以分号(;)结束,声明组以大括号({})括起来.
为了让CSS可读性更强,你可以每行只描述一个属性,如下:
p
{
color:red;
text-align:center;
}

提示:如果值为若干单词,则要给值加引号: p {font-family: "sans serif";}

选择器的分组
你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
h1,h2,h3,h4,h5,h6 { color: green; }

注释
CSS注释以 "/" 开始, 以 "/" 结束

id 选择器 和 class 选择器
如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。

id 选择器 (只能用于具有该ID的html元素身上)
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

</head> <body> <p id="para1">Hello World!</p> <p>这个段落不受该样式的影响。</p>

class 选择器 (可同时用于class为xxx的多个html元素身上)
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

标题居中

段落居中。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中(同样class为center的h1元素是不生效的):

</head> <body> <h1 class="center">这个标题不受影响</h1> <p class="center">这个段落居中对齐。</p>

多重样式优先级(样式表创建后的优先使用次序)
样式表允许以多种方式规定样式信息。
样式可以规定在单个的 HTML 元素中/在 HTML 页的头元素中/或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下,优先级如下:
(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

posted @ 2020-04-20 14:53  ChanixChen  阅读(120)  评论(0编辑  收藏  举报