1、CSS 语法由三部分构成:选择符、属性和值
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
Selector { Property : Value; }
↓ ↓ ↓
选择器 属性 值
选择器:表明 花括号中的属性将应用于哪些HTML元素例如“body” , "p", "div"
属性:例如用于设置背景色的属性"background-color, font-size"等等
值比如说background-color属性的可以是"red(红色),black(黑色 )";font-size的值是"20"
2、HTML文档应用CSS,有三种方法可以选择,行内样式表(style),内部样式表,外部样式
3、行内样式表(style),行内引用是指将CSS样式编码直接写在HTML 标签中的style属性里。(注意这种方式的引入CSS,是不需要写选择器的。)
例子:
<p style="background-color:blue">大家好</p>
<h1 style="font-size:30px; color:#ff0f00;">君临天下</h1>
4、页内引用作为页面中的一个单独部分,由<style></style>标签定位在<head></head>之中。
例子:
(1)
body{
2000px;
height: 1500px;
}
</style>
</head>
<body>
<p>定义页面内容宽度、高度</p>
</body>
(2)
<head>
<title>美女背景</title>
<style type="text/css">
body{
background-image:url(3.jpg);
background-size:100%;
}
</style>
</head>
5、外部样式表,外部样式表是CSS应用中最好的一种形式,它将CSS样式代码单独,放在一个外部文件中,再由网页进行调用。
在<head>....</head>建立个链接,如下
<link rel="stylesheet" type="text/css" href="style.css/">
例子:
(1)HTML中代码
<body>
<p>数风流人物还看今朝</p>
</body>
CSS中代码
body{
background:blue ;
}
P{
font-size: 40;
color: red;
}
(2)HTML中代码
<head>
<title>美女背景</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<p>数风流人物还看今朝</p>
</body>
(2)CSS中代码
body{
height: 1500px;
}
p{
margin-top: 100px;
margin-left: 200px;
}
6、三种引入方式的优先级对比,优先级依次是:就近原则
行内引用> 页内引用> 页外引用
7、css 代码注释,以 /* 开始 */ 结束
8、CSS的选择符可以分成:
通配选择符
元素选择符
群组选择符
关系选择符
id 及 class 选择符
伪类选择符(部分扩展学习)
属性选择符(扩展学习)
伪对象选择符(扩展学习)
9、* 号表示所有的对象,所谓通配选择符,就是指可以使用模糊指定的方式来对对象进行选择,指定样式。
例:页内式
<style>
* {
color:blue;
margin:0;
padding:0;
}
</style>
例:外部样表,CSS中代码
*{
font-size:20px;
color:black;
}
10、元素选择,所谓元素选择符,指以网页中已有的标签名作为名称的选择符。
例:
body {}
h1 {}
p {}
11、群组选择符,除了可以对单个标签进行样式指定外,还可以对一组标签进行相同的样式定义。
例:
h1,h2, h3, p ,div{
font-size:12px;
font-family:arial;
}
使用逗号对选择符进行分隔。对页面中需要使用相同样式的地方,只需写一次样式。