初步认识css(1)

一. css概述

二. css基本语法

1. 样式表

1.1 行内样式表

1.2 内嵌样式表

1.3 外部样式表

三. 选择器

1.标签选择器

2. 类选择器

3. id选择器

4. 通配选择器

5. 后代选择器

6. 选择器的优先级

三. 文本

四. 背景

五. 列表

六. 伪类

七. 透明

八. 标签的分类

1. 块级标签

1.1 div标签

2. 行级标签

2.1 span标签

3. 行块级标签

九. Display

一. css概述

css(Cascading Style Sheet)级联样式表
css是一种样式表语言,用于对HTML文档控制外观,定义布局
例如:CSS涉及字体,颜色,边距,高度,宽度,背景图像,高级定位等方面
可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义表现形式的css在一个.css文件中或者HTML文档的某个位置

HTML是网页的内容,css就是定义网页内容的样式

二. css基本语法

1. 样式表

1.1 行内样式表

行内样式表,又称内联样式,行间样式,内嵌样式,是通过style属性来设置元素的样式,其基本语法如下

<标签名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标签名>

<a href="" style="color:green;font-size: 20px;font-family: 楷体;">新浪</a>

1.2 内嵌样式表

内嵌样式表:定义在HTML文档的头部用<style></style>标签定义,修饰的内容在选择器中定义

<style>.p1{color: green;font-size: 24px;font-family: 楷体;background-color: aquamarine;}
</style>

1.3 外部样式表

外部样式表:使用<link href="外部样式的文件地址",rel="stylesheet">标签将一个.css文件导入到该HTML文档中

<!--导入外部样式表-->
<link href="css/index.css" rel="stylesheet">

三. 选择器

1.标签选择器

标签选择器:通过标签名可以指定要修饰的标签

/* 标签选择器 */<style>/* 超链接选择器*/
a{color: red;
}/*段落选择器*/		
p{color: green;
}</style><body><a href="">新浪</a><a href="">新浪</a><a href="" style="color: crimson">新浪</a><a href="">新浪</a><p>段落</p></body>

2. 类选择器

类选择器:通过标签的class属性来选中一组要修饰标签

/* 类选择器 */<style>
.p1{color: blue;
}
</style><body><a href="">新浪</a><a href="">新浪</a><a href="" class="p1">新浪</a><a href="" class="p1">新浪</a><p>段落</p>
</body>

3. id选择器

id选择器:通过标签的id属性选中唯一的一个要修饰的标签

/* id选择器 */<style>
#aid{color: chocolate;
}
</style><body><a href="">新浪</a><a href="">新浪</a><a href="" id="aid">新浪</a><a href="">新浪</a><p>段落</p>
</body>

4. 通配选择器

通配选择器:用*来选中该HTML文档的所有标签

/* 通配选择器 选中所有的标签*/<style>
*{font-size: 20px;
}
</style><body><a href="">新浪</a><a href="">新浪</a><a href="" id="aid">新浪</a><a href="">新浪</a><p>段落</p>
</body>

5. 后代选择器

后代选择器:对某个父标签下的子标签进行修饰

<style>
/*后代选择器 对某个父标签下的子级标签修饰
*/
.u1 li{color: aqua;text-align: center;list-style-type:none; /*去掉列表前面的符号*/list-style-image: url(img/img.jpg);/*将列表前的符号换成图片*/list-style-position: inside; /*让列表前的符号在列表里面 */		   
}
</style><body><ul class="u1"><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li></ul><ul class="u2"><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li></ul>
</body>

只修饰u1这个无序列表

6. 选择器的优先级

行内样式表>id选择器>类选择器>后代选择器>标签选择器>通配选择器

选择器能选中的范围越大表示选择器的优先级越低,低优先级所独有的修饰也会被添加到样式中

三. 文本

color	设置字体颜色
font-size	字体大小
font-family	设置字体类型
text-align	文本对齐方式
text-decoration:line-through	在文本上添加一条删除线
text-decoration:underline	定义文本下的一条线
text-decoration:none	定义标准文本
font-style:italic	斜体文本
font-weight	字体粗细
line-height	设置行高
letter-spacing	可以指定字符间距
word-spacing	可以指定单词间距
text-indent	用来设置首行缩进

<style>.p1{color:#00aa7f; /* 字体颜色,要么用英语,要么用十六进制 */font-size:20px; /*px是像素单位 css中尺寸需要加单位 */font-family: 楷体; /*字体*/font-weight:700; /*加粗*//* text-align:center; 文本水平对齐 */font-style:italic; /*斜体*//* text-decoration: underline; 修饰文本下添加下划线 *//* text-decoration: line-through; 修饰文本添加删除线 *//* line-height: 30px; 行高 *//* letter-spacing: 20px; 字符间距*//* word-spacing: 20px; 单词间距 *//* text-indent: 2em; 首行缩进 em当前文本中一个字符的大小 */}a{text-decoration: none;//删除超链接下的横线}a:hover{text-decoration: underline;color: #00aa7f;}
</style>

四. 背景

background-color	背景颜色
background-image	背景图片
background-repeat	背景重复
background-size	背景尺寸
background- position	背景位置

<style>p{background-color: aqua;/*设置背景颜色*/background-image: url(img/bg.jpg);/*添加背景图片*/background-repeat: no-repeat; /*背景不重复*/background-position: center center;/*背景位置 水平(left center right) 垂直(top center bottom)*/background-size: 400px 400px; /*背景尺寸 宽 高*/width: 800px;height: 600px;}
</style>

五. 列表

css列表属性可以放置,改变列表项标志,或者将图像作为列表项标志

list-style-image	将图象设置为列表项标志
list-style-position	设置列表中列表项标志的位置
list-style-type	设置列表项标志的类型

list-style可以简写属性

<style>.u1 li{color: aqua;text-align: center;list-style-type:none; /*去掉列表前面的符号*/list-style-image: url(img/img.jpg);/*将列表前的符号换成图片*/list-style-position: inside; /*让列表前的符号在列表里面 */list-style: url(img/img.jpg) outside none;/*简写上述三种*/  }
</style>

六. 伪类

css一个伪类表示了标签的一种特殊状态,当我们需要为处在这些特殊状态的标签设置样式时,就可以使用伪类

伪类的语法

:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>a{color:aqua;}/*当鼠标移入到选择器对应的标签上时,自动切换到此样式表*/a:hover{color: red;font-size:20px;}/*当鼠标点击标签时 自动切换到此样式表*/a:active{color:blue;}p:hover{color: red;background-color: aqua;}p:active{color:blue;}.btn:hover{background-color: aquamarine;}.btn:active{background-color: red;}/*当拥有输入功能的标签 获得鼠标焦点时 自动切换到此样式表*/input:focus{background-color: gainsboro;}</style></head><body><a href="">百度</a><p>段落</p><input type="button" value="保存" class="btn"/><br/><input/><br/><input/><br/><input/><br/><input/><br/><img src="img/photo.jpg"></body>
</html>