-
CSS
☆ CSS 指层叠样式表 (Cascading Style Sheets)
☆ HTML元素通过CSS定义其展现形式
☆ HTML与CSS分别定义,实现内容与展示的分离处理
☆ 外部样式表极大的提高了工作效率
☆ CSS文件后缀为.css文件
-
CSS加入HTML的方式
★ 嵌入式>内联式>外联式>浏览器缺省设置（就近原则）
★ 嵌入式：
<span style="color:bule">简书</span>
★ 内联式：
<head>
<style type="text/css">
body {color: red;}
p {margin-left: 20px;}
</style>
</head>
★ 外联式：
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css"/>
</head>
★ 补充:
1.嵌入式距离元素最近，作为属性单独影响某个固定的元素，展示优先级最高；
2.内联式，定义在<head>内，展示优先级居中，可影响单个元素，也可影响一类元素
例如上例中即影响了所有的<body>内元素（包括嵌入元素）和<p>内元素
3.外联式，定义在单独的css文件中，展示优先级最低，可根据需要进行元素的排版，实际开发中应用最多
4.浏览器缺省设置,某些元素自带格式,若没有为其设置格式,则展示缺省显示
-
CSS基础语法
1.CSS的基本构成,选择器和声明,selector {declaration1; declaration2; ... declarationN }
2.选择器即HTML里面的元素,即获取元素并定义/改变其展示形式
3.声明即属性和属性值,通过设置属性和属性值定义元素的展现形式
4.如body {property1:value1;property2:value2;...}
5.若值含有不止一个单词,则应加"",已定义一个整体;如p {font-family:"sans serif"}
6.含有多个属性值对时,通常写作如下:
body {
color:red;
padding:10px;
font-family: Georgia, Palatino, serif;
}
7.CSS对大小写不敏感,但对于class以及id的获取是必须严格区分大小写的
-
CSS高级语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
h1,h2,h3,p{
color:green;
}
</style>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h1>标题1</h1>
<h4>段落4</h4>
<p>段落1</p>
</body>
</html>
合并声明,对有相同样式的元素,可进行合并声明.
运行图片
