一,概述
CSS(Cascading Style Sheets)(级联样式表)
css是一种样式表语言,为html标签修饰定义外观,分工不同
涉及:对网页的文字、背景、宽、高、布局进行修饰
分为内嵌样式表(平常练习时使用)和外部样式表(制定网页时使用,将css与html网页分离)
CSS与HTML的关系:
HTML是网页内容
CSS定义页面的样式
二,基本语法------行内样式表
1.样式表:
(1)行内样式表
行内样式表:是通过标签的 style 属性来设置元素的样式,其基本语法格式如下:
< 标签名 style=" 属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;"> 内容 </ 标签名 >
(2)内嵌样式表
内嵌式样式表是将 CSS 代码集中写在 HTML 文档的 head 头部标签中,并且用 style 标签定义
<html>
<head>
<title> 样式规则 </title>
将内嵌样式表放在此处
<style></style>
</head>
<body>
</body>
</html>
(3)外部样式表
外部样式表是将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中,通
过 link 标签将外部样式表文件链接到 HTML 文档中
使用link(链接)标签 :
<head>
<link href="引入样式的文件" rel="stylesheet " type=" text /css">
<style type=" text /css">
</style>
2.选择器:
(1)标签选择器:
通过标签选择器可以选择页面中的所有指定标签
语法:标签名 {}
(2)类选择器:
通过标签的 class 属性值选中一组标签
语法: .class 属性值 {}
(3)id 选择器:
通过标签的 id 属性值选中唯一的一个标签
语法: #id 属性值 {}
(4)通配选择器 :
可以用来选中页面中的所有的标签
语法: *{}
3.文本修饰:
color :字体颜色
font-size :字体大小
font-family :字体
text-align :文本对齐
text-decoration:line-through :定义穿过文本下的一条线
text-decoration:underline :定义文本下的一条线
text-decoration:none :定义标准的文本
font-style: italic; 斜体文本
font-weight: 字体粗细
line-height: 设置行高
4.背景修饰:
background-color:背景颜色
background-image 背景图片
background-repeat 背景重复
background-size 背景尺寸
background- position 背景位置
5.CSS的列表属性
CSS 列表属性可以放置、改变列表项标志,或者将图像作为列表项标志 。
list-style-image :将图象设置为列表项标志。
list-style-position : 设置列表中列表项标志的位置。
list-style-type : 设置列表项标志的类型。
list-style: 简写属性。
6.CSS伪类
CSS伪类专门用来表示标签的一种的特殊的状态,当我们需要为处在这些特殊状
态的标签设置样式时,就可以使用伪类 。
(1)伪类的语法 :
:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。
(2)透明度
定义透明效果的属性是 opacity 。
opacity 属性设置标签的不透明级别 值为 1 。
规定不透明度:从 0.0 (完全透明)到 1.0 (完全不透明)。
7.块级,行级,行级块标签
(1)块级标签
无论内容多少 都会独自占据一行的,可以进行修饰。
例如<p>、<h1>、<ul>、<ol>、<hr/>等。
(2)行级标签
只占自身大小的标签,不会占一行,但是不能进行修饰。
例如<font>、<b>、<i>、<a>等。
(3)行块级标签
不会独自占一行,但是可以进行修饰。
例如 <input/> <img>等
8.Display
通过 display 样式可以修改标签的类型。
block :设置标签为块标签
inline :设置标签为行级标签
inline-block :设置标签为行级块标签
9.div和span
(1)div 标签
div 是块级标签,可以放置任何标签。
div 没有任何附加功能,给了什么属性就能变成什么样。
div 主要的作用是被用来布局网页。
(2)span 标签
span 是行级标签
span 没有任何附加功能,给了什么属性就能变成什么样。
span 标签被用来选中文档中的文字。