什么是CSS?
CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表
1.用于HTML文档中元素样式的定义
实现了将内容与表现分离
提高代码的可重用性和可维护性
2.文件后缀是.css
CSS与HTML之间的关系
1、HTML用于构建网页的结构
2、CSS用于构建HTML元素的样式
3、HTML是页面的内容组成,CSS是页面的表现
结构层 HTML
表示层 CSS
行为层 JavaScript
使用CSS样式表的方式
1、内联方式
直接把CSS代码用style属性添加到开始标签中
<p style=“color:red;”>红色字体</p>
2.内部样式表
直接把CSS代码添加到头部的style标签中
<head>
<style>
p{color:red;}
</style>
</head>
3.外部样式表
<link rel="stylesheet" href=""/>
StyleSheet,的意思就是样式调用
4.导入式
<head>
<style>
@import url(my.css);
</style>
</head>
优先级:行内样式>内部样式>外部样式>导入样式
css加载方式link和@import的区别,为什么不推荐使用@import?
-
@import是CSS提供加载样式的一种方式,只能用于加载CSS。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义rel连接属性等。
-
加载顺序的差别。当一个页面被加载的时候,link引用的CSS会同时被加载,@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候会比较明显。
-
兼容性的差别。@import在IE5以上才能识别,而link标签无此问题。
-
使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为dom操作元素的样式时,用@import方式的样式也许还未加载完成。
5.使用@import方式会增加HTTP请求,会影响加载速度,所以谨慎使用该方法。
css语法
1.css是以属性/值对形式出现
2.属性和属性值之间用冒号(:)连接
3.多对属性之间用分号(;)隔开
如:color:red;
CSS样式表特征
1.继承性
指被包含在内部的标签可以拥有外部标签的样式,比如:text-*、font-*、line-*
,但有些属性不能继承,比如:border、padding、margin
2.层叠性
可以定义多个样式
3.优先级
样式定义冲突时,按照不同样式规则的优先级来应用样式
css基础选择器
1.通用选择器,全局选择器(*)
可以与任何元素匹配
常用于设置一些默认样式
优先级最低
通用选择器格式:
*{
属性1:属性值1;
属性2:属性值2;
…
}
2.元素选择器
HTML文档中的元素
p、b、div、a、img、body等
元素选择器格式:
标签{属性1:属性值1;属性2:属性值3;…}
3.类选择器
.className{ } 如:.box{ color:red; }
类名不能以数字开头
一个页面中class名字可以重复
类选择器 格式:
. 类名{
属性1:属性值1;
属性2:属性值2;
…
}
类名不能以数字开头
注意:一个页面中class名字可以重复
4.ID选择器
#idName{ } 如:#box{color:red;}
一个页面中id相同的id名只能出现一次
ID选择器 格式:
#ID属性名{
属性1:属性值1;
属性2:属性值2;
…
}
注意:一个页面中id相同的id名只能出现一次
一般重复使用的样式不使用ID选择器,因为ID属性是唯一的
css选择器命名规范:
1.建议使用字符[a-zA-Z0-9],连接符(-),下划线(_)。不建议使用中文
2.不能以数字开头
优先级:ID选择器>类选择器>标签选择器
5.合并选择器
语法:选择器1,选择器2,…{ }
作用:提取共同的样式,减少重复代码
例如:.header,.footer{height:300px;}
合并选择器(并集选择器) 格式:
选择器1, 选择器2,…{
属性1:属性值1;
属性2:属性值2;
…
}
作用:提取共同的样式,减少重复代码
css样式表优先级总结:
1.相同的选择器,其样式表排序:行内样式>内部样式>外部样式(就近原则)
2.相同方式的样式表,其选择器排序:ID选择器>类选择器>标签选择器(范围越小越优先)
3.外部样式表的ID选择器>内部样式表的标签选择器
div+css布局
内容和显示分离,便于维护扩展,网页布局方便,当需求改变的时候,效果最明显
div:
1.可定义文档中的分区或节
2.可以把文档分割为独立的、不同的部分。
3.是一个块级元素。这意味着它的内容自动地开始一个新行
4.通常与css进行配合,会有更加强的表现形式
布局实例时需要用到的css属性
width:数值
height:数值
background-color:颜色
float:left 使div不占据一行
一般页面可简单的分为上中下结构,上为头部,中为内容部分,下为脚部。例如:
它的HTML结构如下:
<body>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</body>
此时为了有更强的表现力,我们可以加入一点CSS样式,代码如下:
样式部分:
<style>
.header{
height: 100px;
background-color: red;
}
.content{
height: 400px;
background-color: green;
}
.footer{
height: 100px;
background-color: yellow;
}
</style>
*选择一个元素的时候可以直接通过标签,也可以给标签起个class名。
CSS布局练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
border-style: solid;
border-width:9px;
border-color:#83c44e;
}
#top1 {
height:80px;
background:greenyellow;
}
#top2 {
height:80px;
background:greenyellow;
}
#left {
float:left;
height:400px;
width:400px;
background:cornflowerblue;
}
#right {
height:400px;
background:#2196f3;
}
#bottom{
height:80px;
background:greenyellow;
}
</style>
</head>
<body>
<div id="top1"></div>
<div id="top2"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
</body>
</html>