继续CSS~~~~~
CSS给HTML化妆。。。。6666
使用CSS话有3中方法：
1、直接在元素中写style=”” 内联样式
2、在头<head></head>中写样式表<style type =”text/css”> </style>。 内部样式
3、外部引用 .CSS 文件在头中写<link>引用CSS文件。 外部样式
（在做项目中用外部样式） 为了代码复用，精炼代码。
CSS语法
只需要将分号隔开的一个或多个属性/值对作为元素的style属性的值
属性和属性值之间用 ： 连接
多对属性之间用 ; 隔开
1、<h1 style=”color:blue;” >CSS的使用 </h1>
2、<style type="text/css">
h2{color:#0F0;}
</style>
3、在创建个CSS文件
在css中写注释是 /* */ 这样的。
就是和在样式表中写一样，然后引用
<link rel="stylesheet"type="text/css"href="css/style1.css" />
这三个属性要写
rel 是什么，是样式表
type是类型是text/css
最后href 链接路径
CSS语法规范
CSS 由多个样式规则组成
每个样式有两个部分： 选择器和样式声明
如：
h1 { color:red ; font-size:14px; }
h1是选择器，color是属性，red是值，color:red; 是声明
CSS规则特性
1、继承性
父元素的做了样式定义那么子元素也会
如
在样式表中
body{
font-family:”微软雅黑”
}
下面body
写<h1>他就会变，但是有的属性不会继承。
2、层叠性，不冲突的叠加
在样式中写
p{ color:red; }
p{ font-size:16px; }
都有会效果，这就是层叠性。
3、优先级，同一个元素加样式，样式重叠了那么就选择优先级高的。
浏览器默认样式，内部样式，外部样式，内联样式。
他们的优先级 ： 内联 > 内部-外部 >默认。
以优先级高的为准。
还有就近原则，谁在后面以谁为主。
如果给一个标签：
p{red }
<link / > green
p{ blue }
那么最后的颜色是blue
就相当于覆盖了。
设置字体的时候
body{font-family:"微软雅黑","文泉驿正黑","黑体"}
可以设置多个字体，因为windows有微软雅黑，但是有别的系统，就可以写个逗号。
在body中写了所以显示的就都有了，是继承性。
CSS选择器
1、元素选择器
通过元素名称来选择CSS作用的目标，比如 <h1>、<p>
对一些基本的设置，有统一性的才用这个。
2、类选择器
同一类特征class 类型是相同的。
类选择器允许以一种独立于文档元素的方式来指定样式
语法： className {color:red}
有一类共同特征的。
<h1 >11111111111111</h1>
<h2 class="importent">22222222222222</h2>
<h3 class="importent">33333333333333</h3>
.importent{color:#FF0}
点classname{属性，属性值}
选择所有class等于 importent的元素。。
操作一类元素。
便于样式复用。
3、id选择器
id选择器以一种独立于文档元素的方式来指定样式。
它仅作用于id属性的值
语法： #id{ }
在元素中id=””
在样式表中写 #id名{ }
他是唯一的，操作也是对唯一的操作。
这也是id 与class的区别。
页面中有很多元素不好区分可以加id~~~~~~
4、选择器组
选择器声明为以逗号隔开的选择器列表
将一些相同的规则作用于
选择器组，给一组选择器选中的所有元素统一设置样式。
可以一起写
如：
.importent , #a1{ background-color:#ccc; }
就把类名为importent和id名为a1的都设置为背景颜色为#ccc
5、派生选择器
派生选择器用来选择子元素，分为2中：
后代选择器
选择某元素的所有后代（子孙）元素
子元素选择器
选择某元素的所有子元素
后代选择器：
<p id="p1">四川省<u><b>成都市</b>新都区</u><b>新都大道</b>8号
/* 在p1下选择所有的b元素 */
#p1 b { }
p1与 b 之间有空格。
后代用空格分隔
子元素选择器
同样就是把空格换为大于号，就表示值找儿子，不找孙子。
那么只有p1下层的第一层b设置
而用空格表示所有的这个元素。
后代与子元素选择器，空格与大于号。
6、伪类选择器
通过状态来获取元素
用于设置一个元素在不同状态下的样式。
常用伪类：
link
向未被访问过的链接添加样式
visited
向已被访问的超链接添加样式
active
向被激活的元素添加样式
hover
当鼠标悬停至元素上方时，向该元素添加样式
focus
当元素获取焦点时，向该元素添加样式。。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
a:link{ }
选择没有被点击过的超链接设置样式。
a:visited{ }
选择被点击过的超链接设置样式
#btn:active {background-color:#00F;}
激活的元素，就是正被点中的元素
就是在点中那个按钮时，背景被变为蓝色。
p img:hover{width:150px;hight:150px;}
这个就是p下img ，当鼠标悬停的时候宽和高变为150px；
只是悬停，鼠标离开立刻就变回去了。
focus适用于文本框
还有！！！
写文本框是用的input，控件嘛~~~~~~~~
#t1:focus{background-color:#CCC;}
扫一扫
431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
