Css基础
CSS 语法
CSS 规则集(rule-set)由选择器和声明块组成:
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
多条 CSS 声明用分号分隔,声明块用花括号括起来。
Head中定义:
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
ID选择器:
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
</body>
</html>
注意:id 名称不能以数字开头。
CSS 类选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。
实例
在此例中,所有带有 class="center" 的 HTML 元素将为红色且居中对齐:
.center {
text-align: center;
color: red;
}
实例
在这个例子中,只有具有 class="center" 的 <p> 元素会居中对齐:
p.center {
text-align: center;
color: red;
}
HTML 元素也可以引用多个类。
实例
在这个例子中,<p> 元素将根据 class="center" 和 class="large" 进行样式设置:
<p class="center large">这个段落引用两个类。</p>
CSS 通用选择器
通用选择器(*)选择页面上的所有的 HTML 元素。
实例
下面的 CSS 规则会影响页面上的每个 HTML 元素:
* {
text-align: center;
color: blue;
}
CSS 分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。
请看下面的 CSS 代码(h1、h2 和 p 元素具有相同的样式定义):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
最好对选择器进行分组,以最大程度地缩减代码。
如需对选择器进行分组,请用逗号来分隔每个选择器。
外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式是在 head 部分的 <style> 元素中进行定义。
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
行内css:
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Css文本颜色:
<p style="color:DodgerBlue;">。。</p>
Css边框颜色
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
颜色:RGB
要显示黑色,请将所有颜色参数设置为 0,如下所示:rgb(0, 0, 0)。
要显示白色,请将所有颜色参数设置为 255,如下所示:rgb(255, 255, 255)。
通常为所有 3 个光源使用相等的值来定义灰色阴影:
RGBA: 其中的A为透明值
HEX 值:在 CSS 中,可以使用以下格式的十六进制值指定颜色:#rrggbb
#ffffff纯白 #000000纯黑
HSL颜色:色相、饱和度和明度
饱和度:饱和度可以描述为颜色的强度。
100% 是纯色,没有灰色阴影
50% 是 50% 灰色,但是您仍然可以看到颜色。
0% 是完全灰色,您无法再看到颜色。
亮度
颜色的明暗度可以描述为要赋予颜色多少光,其中 0% 表示不亮(黑色),50% 表示 50% 亮(既不暗也不亮),100% 表示全明(白)。
HSLA:A同样为透明度:是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字:
CSS背景元素:
1.background-color 背景色
2.background-image 元素背景的图像。
例如:body {
background-image: url("paper.gif");
}
p {
background-image: url("paper.gif");
}/*<p>段落设置背景*/
3.background-repeat(css背景重复):属性在水平和垂直方向上都重复图像。body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
background-repeat: no-repeat; 只显示一次
4.background-attachment 属性指定背景图像是应该滚动还是固定的(不会随页面的其余部分一起滚动)
background-attachment: fixed; 固定背景图片
background-attachment: scroll; 背景跟随页面滚动
5.background-position 属性用于指定背景图像的位置。
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top; /*放在右上角*/
}
CSS简写属性:
简写前:body {
background-color: #ffffff;
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
简写后:
body {
background: #ffffff url("tree.png") no-repeat right top;
}
注意:在使用简写属性时,属性值的顺序为:
background-color
background-image
background-repeat
background-attachment
background-position
所有CSS背景属性:
background 在一条声明中设置所有背景属性的简写属性。
background-attachment 设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip 规定背景的绘制区域。
background-color 设置元素的背景色。
background-image 设置元素的背景图像。
background-origin 规定在何处放置背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置背景图像是否及如何重复。
background-size 规定背景图像的尺寸。
CSS边框:
border 属性允许您指定元素边框的样式、宽度和颜色。
border-style 属性指定要显示的边框类型。
允许以下值:
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框
border-style 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)。
border-width 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)
p.one {
border-style: solid;
border-width: 5px 20px; /* 上边框和下边框为 5px,其他边为 20px */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 上边框和下边框为 20px,其他边为 5px */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 上边框 25px,右边框 10px,下边框 4px,左边框 35px */
}
border-color 属性用于设置四个边框的颜色。
如果未设置 border-color,则它将继承元素的颜色。
p.one {
border-style: solid;
border-color: red;
}
border-color 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)
p.one {
border-style: solid;
border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}
边框的颜色也可以使用十六进制值(HEX)来指定,或者使用 RGB 值;也可以使用 HSL 值;
在 CSS 中,还有一些属性可用于指定每个边框(顶部、右侧、底部和左侧):
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
border-style: dotted solid double dashed; 上边框是虚线;右边框是实线;下边框是双线;左边框是虚线
CSS简写边框属性:
p {
border: 5px solid red;
}
左边框:
p {
border-left: 6px solid red;
background-color: lightgrey;
}
CSS圆角边框:
border-radius 属性用于向元素添加圆角边框:
p {
border: 2px solid red;
border-radius: 5px; /*px值越大,角度越圆*/
}
总结:所有CSS边框属性
border 简写属性,在一条声明中设置所有边框属性。
border-color 简写属性,设置四条边框的颜色。
border-radius 简写属性,可设置圆角的所有四个 border-*-radius 属性。
border-style 简写属性,设置四条边框的样式。
border-width 简写属性,设置四条边框的宽度。
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 设置上边框的宽度。
CSS外边距:
margin 属性用于在任何定义的边框之外,为元素周围创建空间。
margin-top
margin-right
margin-bottom
margin-left
所有外边距属性都可以设置以下值:
Auto - 浏览器来计算外边距
Length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距
inherit - 指定应从父元素继承外边距