CSS的定义与基本语法

css

css是什么

css是级联样式表(Cascading Style Sheets)

级联:关联,联系,两部分内容之间的联系

样式表:修饰网页的语法集

优点:可以将页面内容与表现形式分离 可以重复利用

css与html的关系:HTML是网页内容,css是定义网页的外观样式等.

css做什么

为HTML控制外观,布局

css的基本语法

css的三种样式表

1.行级样式表

行级样式表,即直接写在标签的行内.用标签style=“属性名=属性值…”

<!-- 行级样式表-->
<p style="color: aqua;font-size: 20px;">有一个杯子</p>

2.内嵌样式表

内嵌样式表,网页内容与css样式分开,在head头部标签中,使用style标签.

<!--内嵌样式表-->
<style type="text/css">
			p{
				color: blue;font-size:30px;
			}

3.外部样式表

外部样式表,将所有的样式放在外部样式表CSS文件中,在CSS文件中添加属性名和它的属性值,然后使用link标签将CSS文件链接到HTML文档中.

<!-- 外部样式表
link="css文件地址
rel="stylesheet"
"-->
<link rel="stylesheet" href="../css/new_file.css"/>

样式的继承:在CSS中，祖先标签上的样式，后代标签会继承, 所以利用继承，可以将一些基本的样式设置给祖先标签,即后代标签将会自动继承这些基本的样式.

css选择器

1.标签选择器

标签选择器,可以选择页面中所有指定的标签

<!--语法:标签名{}-->
p{color: #0000FF;}

2.类选择器

类选择器中,类名是自定义的,但不能用数字作为开头

<!--head标签中-->
.h1{
   color: aquamarine;
}
<!--标签class中自定义属性值-->
<p class="h1">春眠不觉晓,</p>
<p class="h1">处处闻啼鸟.</p>

3.id选择器

id选择器,id名自定义,通过id属性值选择唯一的一个标签.

<!--#id值{}
     id--自定义
-->
#r1{color: blanchedalmond;
			font-size: 20px;}

4.通配选择器

通配选择器的优先级是最低的,但是高优先级的只能覆盖相同属性,不能覆盖通配选择器中特有的属性.

<!--通配选择器 语法*{}-->
*{
	color: brown;
	font-size: 25px;}

5.选择器组合

当有属性名的属性值相同时,可以选择器组合

<!--提取公共属性-->
.h1,.h2{font-size: 20px;}

6.选择器的优先级

最低到高: 通配选择器<标签选择器<类选择器<id选择器

styse=“color: brown”—行级样式的优先级 高于所有的选择器

7.常用的选择器

后代选择器,即选定指定标签的指定后代标签,其中包括儿子和孙子.

子代选择器,选定父亲标签下的指定儿子标签.

相邻选择器,选定指定选择器下的指定的相邻的标签.

兄弟选择器,选择指定选择器的兄弟标签.

<!--定位 需要修饰的选择器-->
<!--后代选择器 包含儿子和孙子-->
.p1 b{
color: #0000FF;
}
<!--子代选择器-->
.p1>b{
color: #0000FF;
}
<!--相邻选择器-->
.p1+p{
color: #0000FF;
}
<!--兄弟选择器-->
.p1~p{
color: #FF7F50;
 }

常用的标签

文本

/* 文本的一些基本属性标签 */
<style type="text/css">
	.p1{
	color: blueviolet;
   /* 字体大小 */
	font-size: 20px;
    /* 字体类型 */
	font-family: 楷体;
	font-weight: bold;
	/* 斜体 */
	font-style: italic;
    /* 删除线 */
    text-decoration: line-through;
	/* 下划线 */
	text-decoration: underline;
	/* 定义标准的文本,删除下划线 */
	text-decoration: none;
	/* 行高 */
    line-height: 30px;
	/* 字符间距 
	 woder-spacing 单词间的间距*/
	letter-spacing: 15px;
	 /* 首行缩进  em 是当前一个文字的大小*/
	text-indent:2em;	
    }
</style>

背景图

 /* 背景图的一些基本标签属性 */
<style type="text/css">
	p{
	/* 背景颜色的宽度和高度 */
	width: 500px;
	height: 400px;
	background-color: #8A2BE2;
	background-size:200px;
	background-image: url(img/Female.gif);
	/* 不可重复 repeat-y repeat-x repeat no-repeat*/
	background-repeat: no-repeat ;
     /* 背景图的位置*/
	background-position:center;
 }
</style>

列表

CSS列表属性可以改变列表位置,列表项标志,还可以将图像作为列表项标志

.r1{
	text-align: center;
    /* 列表前图标的类型 默认实心圆点,圆圈,方块或者无*/
	list-style-type: none;
	list-style-image: url(img/Female.gif);
	/* 控制图标的位置  默认 outside */
	list-style-position: inside;

伪类

css中伪类是专门用来表示标签的一种特殊的状态

/* 普通的链接 未访问过的 */
a:link{
	color: #FF7F50;
	}
/* 访问过的链接 
visited伪类只能设置字体的颜色*/
a:visited{
	color: #8A2BE2;
	}
/* 鼠标移入时的现象 */
	a:hover{
	color: chartreuse;
    }
/* 鼠标点击时的状态 */
a:active{
	color: brown;
	font-size: 20px;
  }
/* :focus 拥有键盘输入焦点的标签添加样式 */
.p1:focus{
	background-color: #FF7F50;
}

透明

透明属性的标签是opacity,其数值为0到1,从完全透明到不透明.

/* 透明属性 从0到1 即从透明到不透明 */
.r1{
	color: #0000FF;
	opacity: 0.5;
}

标签分类

块级标签:无论内容的大小, 都会独占一行. 是默认宽,与父级的标签一致 ;默认高,0或者内容的高度 还可以通过width和height设置宽高.

<!-- 块级标签 独占一行
 h1......h6  p  hr ul ol li 表格 表单-->
<p>
	 <h1 style="width: 300px;">
	哎哎哎
	 </h1>
</p>

行级标签:只占自身大小,不会占一行,并且设置宽高无效.

<!-- 行级标签 a,b,i.-->
<a href="" style="width: 150px;">你好</a>
<a href="">早上</a>
<a href="">晚安</a>
<b>晚安</b>
<i>晚安</i>

行级块标签: 可以设置宽高,并且不占一行

<!-- 行级块标签 img,input.-->
<img src="img/peach.jpg" width="50" height="50" />
<input  style="width: 100px;"/>

display

通过display标签可以修改标签的类型.

<!-- display: inline; 将标签变为行级标签-->
		<p style="display: inline; width: 100px;">这是什么</p>杯子
		<hr/>
<!-- 
		display: block;将标签变为块级标签
		display: inline-block; 将标签变为行级块标签
 -->
		<b style="display: inline-block; width: 100px;">这是什么</b>杯子呀
		<hr/>
<!-- 隐藏标签,让标签中的内容消失 -->
		<p style="display: none;">什么呢</p>杯子

div&span

div标签是块级标签,可以用来布局网页,通过赋予其什么属性就可以变成什么样子.

span标签是行级标签,用来选中文档中的文字,也是赋予其什么属性就可以变成什么样子.

<!-- div是纯净版块标签 可以通过css调整 -->
		<div style="background-color: #A52A2A; height: 100px;">	</div>
<!-- span是纯净版行标签 -->
		<span style="color: red;" class="" id=""></span>