Web-CSS-概述，基本语法和选择器

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>

Web-CSS-概述，基本语法和选择器

CSS

猜你喜欢