HTML,CSS,JAVASCRIPT关系
HTML是网页内容的载体
Css样式是表现(外观控制)
JAVASCRIPT是行为,用来实现网页特效效果
CSS规则由两部分构成:选择器,声明
H1(选择器){color:red;font-size:14px}(声明,)
CSS引用
《内部样式》
写在<head></head>标签内:
<style type=“text/css”>
Css样式
</style>
行内样式<h1 style=””>css使用方法</h1>不建议大量使用
Css外部样式
1. 外部样式表,把CSS样式写在独立的一个文件中
2. 扩展名:css文件名.css
3. 引入外部文件:<link href=”xx.css”rel=”stylesheet”type=”text/css/>
不止一个样式时,用分号来分隔
符号都要在英文状态下输入
相同系的选择器写在一起,用逗号隔开
CSS使用方法区别
类别 | 引入方法 | 位置 | 加载 |
行内样式 | 开始标签内style | Html文件内 | 同时 |
内部样式 | <head>中<style>内 | HTML文件内 | 同时 |
链入外部样式 | <head>中<link>应用 | Css样式文件与HTML文件分离 | 页面加载时,同时加载css样式 |
导入式@IMPORT | 在样式代码最开始处 | Css样式文件与HTML文件分离 | 在读取完html文件之后加载 |
Css使用方法优先级
行内样式>内部样式>外部样式
说明:1.链入外部样式表与内部样式之间的优先级取决于所处位置的先后
2.最后定义的优先级最高(就近原则)
类选择器
1. 为HTML标签添加CLASS属性:
<h1 class=”red”>内容1</h1>
<p>内容2</p>
2. 通过类选择器来为具有此CLASS属性的元素设置CSS样式:
.red{color:red;}
<a>伪类选择器
a:link {color:#FF0000;}(未访问的链接,只用于a标签)
a:visited {color:#00FF00;}(已访问的链接,只用于a标签)
a:hover {color:#FF00FF;}( 鼠标移动到链接上,可和其他标签结合一起用)
a:active {color:#0000FF;}(选定的链接)
ID选择器
为HTML标签添加ID属性:
<h1>内容1<h1>
<p id=”p1”>内容2</p>
<p id=”p2”>内容3></p>
通过id选择器来为具有此ID的元素设置CSS规则
#p1{color:red;}
#p2{color:blue;}
群组选择器:
选择多个元素,以逗号隔开 #main,.first,span,a,h1{color:red;}
Id和class使用
1. ID不要滥用,谨慎使用
2. 适当使用class
css文字文本属性:
font-style:normal/ italic (斜体)
font-weight:normal(100-500)/ bold(600-900) (为粗体)
font-family: “文本字体1”; (文本类型)
text-align:left/center/right (水平对齐)
vertical-align:top/middle/bottom(垂直对齐)
line-height:数字px;(设置文本在一行内的高度)
color:(颜色)
letter—spacing:(字符间隔)
text-decoration 文本修饰
none:没有修饰
underline:添加下划线
text-indent 首行缩进
overline:添加上划线
line-through:添加删除线