新手笔记——CSS
什么是CSS 美化网页
CSS:层叠样式表(Cascading Style Sheet)
CSS的优势
1、内容与样式分离
2、网页的表现同一,容易修改
3、丰富的样式,是页面布局更加灵活
4、减少网页的代码量,增加网页的浏览速度,节省网络宽带
5、运用独立于页面的CSS,有利于网页被搜索引擎收取
CSS语法规则
选择器{ h1{
属性:值; font-size:12px;
属性:值 ; color:#F00;
...... ......
} }
h1:选择器 font-size:属性 12px:值
(font-size:12px; color:#F00; ):声明
选择器
标签选择器:选择器写法和标签是一致的。所有的这些标签会使用统一的样式
p{font-size:16px;color:red;}
类选择器:某一些标签或某一些不同的标签 使用一种选择器
.red{
color:red;
}
<h1></h1>
<h1 class=”red”></h1>
<h1></h1>
<p></p>
<p class=”red”></p>
ID选择器:想要某一个元素使用特点的样式 使用不可重复的原因是不符合标签规则的
#green{
color:#00ff00;
}
<p id=”green”></p>
颜色:使用英文单词:red、yellow、blue、green。。。。
使用十六进制数字表示 0-9 A B C D E F
RGB=Red Green Blue
CSS的注释:/*注释内容*/
HTML的注释: <!--注释内容-->
MySQL的注释:--空格 必须有空格
CSS的使用
网页中引用CSS样式
内联样式 <p style=””></p>
内部样式表<style></style>
外部样式表
链接式
创建一个外部的css文件:*.css,把样式写在这个文件中
谁想要用这个样式,谁就引入这个css文件即可
<link rel=”stylesheet” href=”样式文件路径”/>
导入式
@import”样式文件路径”
链接式与导入式的区别
<link/>标签属于XHTML,@import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页当中,在进行编译显示
使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中
@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来书就是无效的
CSS样式优先级
行内样式>内部样式表>外部样式表
ID选择器>类选择器>标签选择器