1、CSS 简述
CSS指层叠样式表(Cascading Style Sheets)
可分为3种:
1、内联样式(在HTML元素内部)
2、内部样式表(在<head>标签内部)
3、外部样式表(存放另一个文件,在html种调用)
2、CSS 语法
CSS规则有2个主要部分组成:选择器和一条或多条声明,如下
selector {declaration:declaration2;declaration3;...declarationN}
选择器 {声明1;声明2;...声明N}
示例:h1 {color:red; font-size:14px;font-family: "sans serif"}
其中h1是选择器,color属性,red是对应的值(只取了一组)
注意点:
1、颜色值有多种写法如:
p { color: #ff0000; }
p { color: red; }
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); } 用的较少
2、如果值为若干单词,则要给值加引号
3、如果有多个声明,应当每行写一个,如下:
p {
text-align: center;
color: black;
font-family: arial;
}
3、选择器分组
当我们需要设置多个选择器的声明相同时,可以分为一组从而分享共同的声明
如下:
h1,h2,h3,h4,h5,h6 {
color: green;
}
4、id选择器
id选择器以“#”来定义
#red {color:red;} 元素颜色为红色
#green {color:green;} 元素颜色为绿色
html代码执行后:
<p id="red">这个段落是红色。</p> #文字为红色
<p id="green">这个段落是绿色。</p> #文字为绿色
5、CSS类选择器
类选择器以一个点号显示,如下:
.center {text-align: center} #居中对齐
html代码调用:
<h1 class="center">
This heading will be center-aligned #文字居中对齐
</h1>
<p class="center">
This paragraph will also be center-aligned。 #文字居中对齐
</p>
6、CSS属性选择器
对带有指定属性的 HTML 元素设置样式。
1、属性选择器,如下:会为带有title属性的所有元素设置样式
[title]
{
color:red;
}
html代码调用:
<h2 title="world">Hello world</h2> #文字会显示设置属性颜色:红色
2、属性和值选择器,如下会为title=“hello”的所有元素设置样式
[title=“hello”]
{
color: red;
}
html代码调用:
<h2 title="hello">Hello world</h2> #只有调用title=“hello”的文字才会会显示设置属性颜色:红色
<h2 title="hello">Hello world</h2> #title不等于“hello” 文字不会显示红色
3、属性和值选择器-多个值,如下会为包含指定值的title属性的所有元素设置样式
[title~=hello] { color:red; } #调用的title属性值中包含hello 就设置样式
html代码调用:
<h2 title="hello world">Hello world</h2> #属性值包含hello,会设置样式
<p title="student hello">Hello W3School students!</h1> #属性值包含hello,会设置样式
4、设置表单样式:属性选择器在为不带有 class 或 id 的表单设置样式时特别有用:
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
html代码调用:
<input type="text" name="Name" value="Bill" size="20"> #设置样式
<input type="text" name="Name" value="Gates" size="20"> #设置样式
<input type="button" value="Example Button"> #设置样式
7、CSS选择器参考
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
8、CSS背景:background
background-color:设置元素背景色。如:p {background-color: red} 设置p标签的背景色为红色
background-image:把图像放入背景。如:body {background-image: url(/image1.jpg)} 设置body 背景图片为image.jpg
backgroud-repeat:背景图像重复(水平方向或垂直方向平铺)如:
body
{
background-image: url(/image1.jpg);
background-repeat: repeat-y; #垂直方向平铺(repeat-x 水平平铺,no-repeat 不平铺)
}
backgroud-position:改变图像在背景中的位置(top:上部,bottom:下部,left:左边,right:右边,center:居中)
当然也可以是像素值,比如100px 50px表示从元素内边区左上角向下100px,向右50px;
也可以是百分比,比如:66% 33%表示把一个图像放在水平方向 2/3、垂直方向 1/3 处
body
{
background-image:url('/image1.jpg');
background-repeat:no-repeat;
background-position:50px 100px; #或者用百分比
}
backgroud-attachment:fixed 这个属性可以保持图像一直在视图中,防止因滚动消失
9、CSS背景属性
background 简写属性,作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
10、CSS文本
text-indent:设置文本的缩进;如:p {text-indent:5em} 表示段落首行缩进5em(1em等于当前字体尺寸)
text-align:水平对齐
left:左对齐
right:右对齐
center:居中对齐
justify:两端对齐
word-spacing:在原标准上改变字(单词)之间的标准间隔(也就是字间距)
letter-spacing:改变字符或字母之间的间隔
text-transform:处理文本的大小写
none:不做任何改动
uppercase:原文本转换为大写
lowercase:原文本转换为小写
captilize:原文每个单词首字母大写
text-decoration:文本装饰
none:一般默认外观
underline:有下划线
overline:上划线
line-through:类似删除线
blink:文字闪烁
white-sapce:处理空白符
值 空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许
11、CSS文本属性
属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。
12、CSS字体
font-family:指定字体。如;body {font-family: sans-serif;}
font-style:字体风格
normal:文本正常显示 如:p.normal {font-style:normal;}
italic:文本斜体显示 如:p.italic {font-style:italic;}
oblique:文本倾斜显示 如:p.oblique {font-style:oblique;}
font-size:字体大小
在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值:
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
13、CSS字体属性
属性 描述
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)
font-stretch 对字体进行水平拉伸。(CSS2.1 已删除该属性。)
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。
14、CSS链接
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
15、CSS列表
列表类型:list-style-type 如:ul {list-style-type : square}把无序列表中的列表项标志设置为方块。
列表项图像:list-style-image 如:ul li {list-style-image : url(xxx.gif)}只需要简单地使用一个 url() 值,就可以使用图像作为标志
列表标志位置:list-style-position 如:li {list-style: inside} 标志位在内容之内
16、CSS列表属性
属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
17、CSS表格
如需在 CSS 中设置表格边框,请使用 border 属性。如下表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。
table, th, td
{
border: 1px solid blue;
}
折叠边框:border-collapse 将表格边框折叠为单一边框,如下就可以使得表格显示单边框
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格的宽度和高度,如下将表格宽度设置为 100%(浏览器窗口),同时将 th 元素的高度设置为 50px:
table
{
width:100%;
}
th
{
height:50px;
}
18、CSS 表格属性
属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。
19、CSS轮廓
属性 描述 CSS版本
outline 在一个声明中设置所有的轮廓属性。 2
outline-color 设置轮廓的颜色。 2
outline-style 设置轮廓的样式。 2
outline-width 设置轮廓的宽度。 2
20、CSS内边距
属性 描述
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。
21、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 设置元素的上边框的宽度。
22、CSS外边距属性
属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
23、CSS定位属性
属性 描述
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。