CSS
1.概述
CSS是级联样式表。
CSS是一种样式表语言,用于为HTML文档控制外观,定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图片、高级定位等方面。
可将页面的内容与表现形式分离,页面内容放在HTML文档中,而用于定义表现形式的CSS在一个.css文件中或HTML 文档的某一部分。
级联:关联,两个事物之间的关系,指的是网页内容和修饰网页内容的css语法。
理念是将网页和样式分离, 这样重复的样式只需要定义一次即可.
样式表:修饰网页内容的语法的集合
作用:修饰网页内容的外观、文本、背景、列表、定位 …
CSS与HTML的关系:
HTML是网页内容
CSS 定义网页的样式,外观…
2基本语法
三种样式表
1)行内样式表(内联样式),是通过标签的style属性来设置元素的样式.运用最少,可以控制一个标签.其基本语法格式如下:
<p style ="color:red ;font-size:20px;font-family:宋体;"> <!--本段是对p标签采用了行级样式 -->
</p>
2)内嵌样式表,是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义。运用较多,可以控制一个页面.
<style type="text/css">
p{
color:red;font-family:"宋体";font-size:20px;
}<!--本段是对p标签采用了内嵌样式表,属性与属性之间用分号:隔开,p为选择器 -->
</style><!--本段style标签应写在head标签中-->
3)外部样式表,是将所有的样式放在一个或多个以.CSS为扩张名的外部样式表文件中,通过link标签将外部样式标签文件连接到HTML文档中。运用最多,可以控制整个站点.
<head>
<link href="newstyle.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head><!--本段是用link将css的外部样式表引入HTML文档中-->
3CSS选择器
使CSS对HTML页面中的标签实现一对一,一对多的控制。写在head标签中。
常用的选择器:
- 标签选择器:通过标签选择器可以选择页面中的所有指定标签
p{ 属性: ;}
- 类选择器(最广泛)
<p class="a1"> </p>
.a1{属性: ;
}
- id选择器:通过选择器分组可以同时选中多个选择器对应的标签
<p id="a1" ></p>
#a1{属性: ;}
- 选择器组合:通过选择器分组可以同时选中多个选择器对应的标签
p,.p1,#p0{属性: ;}
- 通配选择器:可以用来选中页面中的所有的标签
*{属性: ;}
选择器优先级由高到低:行样式表、id、类选择器、标签选择器、选择器组合、通配选择器
- 后代选择器:选中指定标签的指定后代标签
祖先标签 后代标签{} - 子标签选择器:选中指定父标签中的指定子标签
父标签>子标签 - 选中指定标签的相邻标签
选择相邻选择器:选择器+相邻{} - 兄弟选择器:选中指定标签的兄弟标签
选择器~兄弟{}
标签之间的关系
父标签:直接包含子标签的标签
子标签:直接被父标签包含的子标签
后代标签:直接或间接被祖先标签包含的标签,子标签也是后代标签
兄弟标签:拥有相同父标签的标签叫做兄弟标签
样式的继承
在CSS中,祖先标签上的样式,也会被他的后代标签所继承,利用继承,可以将一些基本的样式设置给祖先标签,这样所有的后代标签将会自动继承这些样式。
CSS中的一些属性 - color:字体颜色
- font-size:字体大小
- font-family:字体
- text-align:文本对齐
- text-decoration:lin-through:定义穿过文本下的一条线
- text-decoration:underline:定义文本下的一条线
- text-decoration:none:定义标准的文本
- font-style:italic;斜体文本
- font-weight:字体粗细
- line-height:设置行高
- letter-spacing可以指定字符间距
- text-indent用来设置首行缩进
- background-color背景颜色
- background-image背景图片
- background-repeat背景重复
- background-size背景尺寸
- background-position背景位置
CSS列表属性可以放置、改变列表项标志,或者将图像作为列表项标志 - listy-style-image 将图像设置为列表项标志。
- list-style-position 设置列表中列表项标志的位置
- list-style-type 设置列表项标志的类型
- list-style 简写属性
以上属性如下代码所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 对段落p进行属性修饰 */
p{
text-indent: 2em;
color: #0000FF;
font-size: 20px;
font-family: 宋体;
font-weight: 200;
text-align: left;
text-decoration:underline;
font-style: italic;
letter-spacing: 20px;
line-height: 40px;
}
/* 取消下划线 */
a{
text-decoration: none;
}
/* 对无序列表进行属性修饰 */
ul>li{
list-style-type: none;/* 没有列表项标志 */
list-style-position: inside;/* 列表项标志跟随列表内容 */
list-style-image: url(img/hao123.png);/* 列表项标志图标 */
}
</style>
</head>
<body>
<p>段落css属性段落css属性段落css属性段落css属性段落css属性段落css属性段落css属性段落css属性段落css属性
段落css属性段落css属性段落css属性</p>
<a href="">超链接</a>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
</body>
</html>