CSS基础语法讲解
CSS称为层叠样式表(级联样式表) 全称为: Cascading Style Sheets,主要用来设置网页的样式,后缀名: .css
介绍了CSS的基本结构后,我们怎么能使用它呢,怎么能把他放在HTML中使他功能产生作用呢。以下为大家简述几种方法。
方法一:内联引入
在元素上加属性style,格式如下:
<元素 style="属性1:属性值1;属性2:属性值2;"></元素>
这种方法虽说简单快捷,但是缺点比较大,内联方式的CSS与HTML的代码放在一起,导致代码不美观,并且导致可维护性差,可复用性差,而且内联样式一次,只能对一个标签起作用,如果有多个相同属性样式,需要重复写很多,数量比较大的话,量比较大。
方法二:内嵌引入
在head中写style标签,style标签中写CSS内容,格式如下:
<style>
选择器{
属性名:属性值;
属性名:属性值;
。。。
}
div{
font-size:20px;
color: #f00
}
</style>
内嵌引入和内联的方法差不多,样式也差不多,所以缺点也一样。所以编写CSS样式表,不推荐这两种方式。
方法三:外部引入(推荐)
将CSS样式内容独立为.css文件,在HTML中通过link标签引入,强烈推荐使用这种方式,它将CSS与HTML独立出来,代码整洁,方便观看和查找,可复用性高,维护起来也比较方便。
外部引用的使用发法:
<meta charset='utf-8' />
<title> CSS引入方式</title>
<link rel='stylesheet' href='CSS/03.css' />
</head>
方法四:导入(不推荐)
link标签的属性:
- rel="stylesheet" 告诉浏览器这是一个样式表
- href="CSS文件的路径" 链接引入对应的CSS文件
<meta charset='utf-8' />
<title> CSS引入方式</title>
<link rel='stylesheet' href='CSS/03.css' />
</head>
方法四:导入(不推荐)
@import 导入文件, 不推荐使用,使用方式:
<style>
@import url(CSS文件的路径)
</style>
或者在CSS文件中带入其他CSS文件的内容
- link是HTML标签,@import只能在CSS中使用
- link会在网页加载时同时加载,而@import需要网页完全载入才能加载
- link无兼容问题,@import 是CSS2.1以后加入的,兼容性一般
- link可以使用JS脚本控制,而@import不可以
注意: 如果样式表内容不多,可以使用内嵌的方式,绝大多数情况推荐使用外部引入的方式。
以上方式的优先级顺序:link与style内嵌同时存在,采用“就近原则”,后写的会将先写的覆盖掉
以上为标签选择器代码,选择的是所有的div标签。
内联的优先级要高于内嵌跟外部引入。
对于选择器的选择,以下推荐几种常用的选择器,供大家选择
一、元素选择器:
1、标签选择器:<html>
<head>
<meta charset='utf-8' />
<title> CSS引入方式</title>
<style>
*{border: 2px solid #0f3;} <!--*代表所有元素-->
iv{
width: 400px;
height: 300px;
background: #f00;
}
p{
background-color: #ff0;
}
.yellow-text{
font-size: 40px;
color: #ff0;
}
#blue{
font-size: 50px;
background-color:#00f;
color: #f06;
} <!--ID属性只能有一个,优先级比较高-->
</style>
</head>
<body>
<div>hello world!</div>
<div class='yellow-text'>hello world!</div>
<p>this is the p</p>
<div class='yellow-text'>hello world!</div>
<div>hello world!</div>
<div id='blue'>hello world!</div>
</body>
</html>
<head>
<meta charset='utf-8' />
<title> CSS引入方式</title>
<style>
*{border: 2px solid #0f3;} <!--*代表所有元素-->
iv{
width: 400px;
height: 300px;
background: #f00;
}
p{
background-color: #ff0;
}
.yellow-text{
font-size: 40px;
color: #ff0;
}
#blue{
font-size: 50px;
background-color:#00f;
color: #f06;
} <!--ID属性只能有一个,优先级比较高-->
</style>
</head>
<body>
<div>hello world!</div>
<div class='yellow-text'>hello world!</div>
<p>this is the p</p>
<div class='yellow-text'>hello world!</div>
<div>hello world!</div>
<div id='blue'>hello world!</div>
</body>
</html>
2、class选择器:
给元素添加class属性(相当于起个名字),然后在css中.class名{属性:属性}值}
class命名:多个单词的时候: word1-word2
<p class='text' id='blue'>this is the p</p>
<p class='blue-text' id='black'>this is the p</p>
<div class='yellow-text'>hello world!</div>
<p class='blue-text' id='black'>this is the p</p>
<div class='yellow-text'>hello world!</div>
3、ID选择器:
给元素添加ID属性,在css中通过#id名{}设置样式,ID是唯一标识,一个页面中不要有重复的ID,一个ID名只能出现一次,一般不要用ID作为选择器,因为优先级比较高。
<div id='blue'>hello world!</div>#red{background-color:#f00;}
4、通配符:
*{} *代表选中所有元素
5、选择器的优先级:!important>#id选择器>.class选择器>标签选择器>*
二、关系选择器
1、后代选择器:以下代码中选择器选中的是div中所有的a标签,不管是子级还是孙子级别的都会被选中
div a{
background-color: #00f;
}
background-color: #00f;
}
2、子级选择器:以下代码中选择器只会选中div的子级a元素,孙子级不会被选中
div>a{
background-color: #f09;
}
background-color: #f09;
}
盒模型
块级元素如果没有设置宽度,默认就是占满父级元素的宽度,就是100%;
如果没有设置高度,高度是被内容撑开的
还有一些属性选择符,伪类选择符,伪对象选择符。这些选择符不是很常用,有想要了解的朋友了解一下即可。