目录
0.CSS用来干啥?
1.怎么写?
2.写在哪?
0.CSS用来干啥?-------------------------------------------------------------------------
层叠样式表 (Cascading Style Sheets). CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
1.怎么写?---------------------------------------------------------------------------------
选择符:又称选择器,指明了{}中的“样式”的作用对象.
声明:在英文大括号“{}”中的的就是声明,
属性和值之间用英文冒号“:”分隔,
声明之间以英文分号“;”分隔.
各种选择器
选择器 | 写法 | 一个html中的使用次数 | 使用词列表方法为一个元素同时设置多个样式 |
---|---|---|---|
ID选择器 | # id1{color:yellow;} | 一次 | 不可以 |
类选择器 | .lei1{color:green;} | 多次 | 可以<span class="stress bigsize"> |
标签选择器 | <span> color:blue</span> | 可以<span> </span> | |
子选择器 | .food>li{border:1px solid red;} (下一代) | ||
后代选择器 | .food>li{border:1px solid red;} (所有后代) | ||
通用选择器 | * {color:red;} (所有标签元素) | ||
伪类选择符 | a:hover{color:red;} 为标签的某种状态设置样式(如鼠标滑过) | ||
分组选择符 | h1,span{color:red;} (同时设置几个标签样式) |
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识CSS样式</title>
<style type="text/css">
p8{
font-size:12px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设置字体加粗*/
}
span{
color:red;
}
</style>
</head>
<body>
<p8>这个标签的名字和上面css的名字相同(p8),也可以,但是为了语义化,还是要写标准的标签,p标签</p8>
<p>啦啦啦 <span>把我标红</span>、啦啦啦, <span>我也是</span>啦啦啦<span>我也要</span>。啦啦啦</p>
</body>
</html>
想改哪里改哪里, 分开的多个字段也可以,只要css选择器和下面的标签名称一致.
注释为 /* */
2.写在哪?
(1).一共三个地方可以写: 内联式 /嵌入式/ 外部式
那同时有的话,听谁的呢?
html 文件
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css"> <!--第二 : 嵌入式 红色--> <!--嵌入式必须写在head和style里面-->
span{
color:red;
}
</style>
</head>
<body>
一共有三种颜色,---内联式, 嵌入式,外部式
<!--第一: 内联式 绿色-->
<span style="color:green"> 看看我到底是什么颜色</span>
</body>
</html>
css文件
<!--第三: 外部式 蓝色-->
span{
color:blue;
}
答案是 原谅色~~~
就近原则!!!