4.CSS基础
4.1css的介绍
层叠样式表(英文全称:Cascading Style Sheets),是一种对web文档添加样式的简单机制,属于表现层的布局语言.
4.2css基础语法
CSS语法由两部分组成:选择符、声明。
声明包括:属性和属性值
选择符 {属性: 属性值 ;属性:属性值}
div{width:500px;}
div----->选择符
with---->属性
500px--->属性值
width:500px---->声明
4.3语法说明
每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值;
属性必须放在花括号中,属性与属性值用冒号连接。
每条声明用分号结束。
当一个属性有多个属性值的时候,属性值与属性值不分先后顺序。
在书写样式过程中,空格、换行等操作不影响属性显示。
例如:div{ width:200px;height:200px;background:red; }
4.4 样式的建立
4.4.1内部样式(嵌套到页面中)
语法
<style type="text/css">
css语句
</style>
注:使用style标记创建样式时,最好将该标记写在<head></head>中;
<head>
<meta charset="UTF-8">
<title>index2</title>
<style type="text/css">
div{
width: 100px;
height: 200px;
background-color: red;
}
</style>
</head>
***此样式会给当前页面body中的所有div添加属性***
4.4.2外部样式(使用最多)
a:外部样式表的创建
b:外部样式表的导入
首先在css文件夹中创建.css文件
在css文件中写样式
div{
width:100px;
height: 100px;
background-color: blueviolet;
}
语法: <link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />
<head>
<meta charset="UTF-8">
<title>index2</title>
<link type="text/css" rel="stylesheet" href="css/index2.css" />
</head>
说明:
使用link元素导入外部样式表时,需将该元素写在文 档头部,即<head>与</head>之间。
rel:用于定义文档关联,表示关联样式表;
type:定义文档类型;
4.4.3内联样式(表行间样式,行内样式,嵌入式样式)(用的很少)
优先级 最高 高于外部的样式的优先级
语法:<标签 style=“属性:属性值;属性:属性值;”></标签>
例如:<div style="width:100px;height:100px;"></div>
4.5样式表的优先级
以后使用的时候尽量使用一种样式,避免优先级问题
内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高
4.6css选择符(选择器)
为了找到要修改样式的标签,所以采用选择器
选择符的定义
选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素.
常用的选择符有十种左右 类型选择符,id选择符,class选择符,通配符,群组选择符,包含选择符,伪类选择符,伪对象选择符。
4.6.1元素选择符/类型选择符(element选择器)
语法:元素名称{属性:属性值;}
例如:css文件中的div{
width:100px;
height: 100px;
background-color: blueviolet;
}
----这种选择符会找到当前页面所有的div,并且给其添加属性----
类型选择符是根据html语言中的标记来直接定义
说明:
a)元素选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符。例如body、div、p,img,strong,span......等。
b)所有的页面元素都可以作为选择符; 用法:如果想改变某个元素得默认样式时,可以使用类型选择符;
用法:
(1)如果想改变某个元素的默认样式时,可以使用类型选择符;(如:改变一个p段落样式)
(2)当统一文档某个元素的显示效果时,可以使用类型选择符;(如:改变文档所有p段落样式)
案例:搭色块
4.6.2id选择器
语法:#id名{属性:属性值;}---->在css文件中
说明:
1、当我们使用id选择符时,应该为每个元素定义一个id属性; 如:<div id="top"></div>
2、id选择符的语法格式是“#”加上自定义的id名; 如:#box{width:300px; height:300px;}
3、起名时要取英文名,不能用关键字:(所有的标记和属性都是关键字)
4、一个id名称只能对应文档中一个具体的元素对象,因为id只能定义页面中某一个唯一的元素 对象。
5、最大的用处:创建网页的外围结构
4.6.3class选择器
语法:.class名{
属性:属性值;}---->在css中书写
.top{
background-color: blue;