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 选择器以 "#" 来定义。
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 > 浏览器默认样式