二、CSS代码的书写方式
2、1 代码应该书写在什么地方!
书写方式分为三种:嵌入式、外链式、行内式
2、2 嵌入式
嵌入式是通过HTML中的
style>标签将CSS代码嵌入到HTML网页中
语法规则
它可以出现在HTML中的任何地方,但一般情况我们智慧将它放置在head标签里面。
2、3 外链式
外链式
:是指单独写一个以.css为扩展名的文件,然后在标签中使用标签,将CSS文件连接到HTML文件中
注意:
css文件不能单独的运行,他必须要依赖于HTML文件
语法格式:
注意:
一定要确定CSS代码引入成功。
在网页中检查有没有写错.
第一步:在当前页面点击鼠标右键选择 “检查元素”。
第二步:找到"Network"选项卡。
第三步:要刷新当前页面。
第四步:查找network选项卡中的status装态。
如果是"成功"就表示文件已经被加载。
如果是"失败"就表示文件没有被加载。
注意:
可以同时引入多个CSS文件只要写 就可以.
2、4 行内式:
将CSS代码书写在HTML标签的 sytle 属性中
style 是一个通用属性,每一个比钱里面都拥有这个属性!
语法格式:
<标签名 style=“属性:值;属性:值;”></标签名>
总结:
1、使用嵌入式的方式来书写CSS代码,它只能作用与当前的HTML文件。
2、使用外链式的方式来书写CSS代码,它可以作用于多个HTML文件。
三、注释
格式
/* 注释的内容 */
注意:
千万不要在CSS代码中使用HTML的注释。
四、选择器
4、1 选择器
选择器是指通过一定的语法规则选取到对应的HTML标记,然后给这个对应的HTML标记设置样式
选择器分为四大类
基本选择器
通用选择器
格式 *{属性:值;}
含义:通用选择器,将匹配HTML所有标签,
不建议使用,给大型网站增加负担。
例子
*{margin:0px;}
*{
clolor:blue;/给文本设置成蓝色/
}
标签选择器
格式 标签名{属性:值;}
含义 :标签选择器,匹配对应的HTML标签
例子
/给p标签设置标记大小为14像素/
p{font-size:14px;}
类选择器
格式 .class属性值{属性:值;}
含义 类选择器,给拥有指定的CLASS属性值的元素设置样式
例子
只要的class属性的值为h的表标签 不管它是什么标签 都会设置样式
{
color:red;
}
.box{width:800px;}
ID选择器
格式 #id属性值{属性:值;}
含义 id选择器可以为标有特定ID的HTML元素指定特定
的样式,只能使用一次。ID选择器以 # 来定义
例子
#title{font-size:14px;}
复合选择器
伪类选择器