1、CSS概述
1）css指层叠样式表
2）样式定义如何显示HTML元素
3）样式通常存储在样式表中
4）把样式添加到HTML4.0中，是为了解决内容与表现分离的问题
5）外部样式表可以极大提高工作效率，外部样式表通常存储在css文件中
6）多个样式定义可层叠为一（相同的覆盖，不同的合一）
2、CSS可以做什么
a）网页效果（图片/字体/布局）
1）浏览器缺省设置
2）外部样式表（位于CSS文件内部，与<head>引入）重用，统一风格。
3）内部样式表（位于<head>标签内部的<style>）
4）内联样式/行内样式（在HTML元素内部style属性）
5）层叠为一：行内样式（最强）\外部样式与内部样式需要看声明的顺序
6）W3C建议：外部样式->内部样式->行内样式
b）脚步编程（选择器）
3、CSS语法
css语法由三部分构成：选择器、属性、值
selector{property:value;property2:value2;}
CSS对大小写不敏感，建议全小写，样式之间使用英文;分号隔开，最后一个可以不使用分号。
4、CSS选择器
Html选择器:所用相同的html元素(全部)
Id选择器:唯一的,精确控制(唯一)
Class选择器:相同class的控制(范围控制,部分)
属性选择器
派生选择器(Extjs): 上下文(级\层)关系来定义样式
伪类选择器
混合选择器:多种选择器混合使用.
<!DOCTYPE>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8"/>
<!--1. 外部样式
相对路径:相对当前文件的路径-->
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
<!--2.内嵌样式/内部样式 00-ff 0-255-->
<style type="text/css">
/*html选择器:*/
p{
font-size : 30px
}
/*id选择器:注意模块、表单组件的唯一Id*/
#myId1{
font-size : 50px
color: red;
}
/*class选择器*/
.myType{
color: #885532;
}
/*派生选择器 元素间必须有空格*/
li strong {
font-style: italic;
font-weight: normal;
}
/*混合选择器：选择器间不可以有空格*/
div#sidebar {
border: 1px dotted #000;
padding: 100px;
}
/*属性选择器 不可以有空格*/
/*input[name=""]*/
/*伪类选择器：不可以有空格*/
a:hover{
font-size : 50px
}
</style>
</head>
<body>
<a href="www.baidu.com">超链接</a>
<div id="sidebar">Test div</div>
<div>Test div2</div>
<ol>
<li>
<strong>Hello World!</strong>
</li>
</ol>
<hr/>
<strong>Hello World!</strong>
<p id="myId1">段落1</p>
<p class="myType">段落2</p>
<p >段落3</p>
<p class="myType">段落4</p>
<p>段落5</p>
<p class="myType">段落6</p>
<!--3.行内样式-->
<p style="font-size : 50px">行内样式</p>
</body>
</html>
5、CSS优先级
声明的顺序：行内》内嵌》外部
选择器：id选择器》class选择器》html选择器
<!DOCTYPE>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8"/>
<!--2.内嵌样式/内部样式 00-ff 0-255-->
<style type="text/css">
/*html选择器:*/
p{
color: blue;
}
/*class选择器*/
.myType{
color: green;
}
/*id选择器:注意模块、表单组件的唯一Id*/
#myId1{
font-size : 50px;
color: red
}
/*优先级：
声明的顺序：行内》内嵌》外部
选择器：id选择器》class选择器》html选择器
*/
</style>
</head>
<body>
<p class="myType" id="myId1" >行内样式</p>
</body>
</html>
时间： 2024-08-06 05:34:26