首页 > Web开发 > 详细

HTML 网页开发、CSS 基础语法——十.CSS语法

时间:2021-01-10 22:53:16      阅读:30      评论:0      收藏:0      [点我收藏+]

CSS代码书写位置

? CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明
1.内联式
① 内联式简介
?内联式,也被习惯叫做行内式。
?书写位置:在 HTML 标签之上的 style 属性中书写 css 样式。
?所有的 css 样式属性总体组成标签的 style 属性的属性值。
<div style="width: 100px;height: 100px; font-size: 14px;">1</div>

② 内联式缺点

a. 内联式必须写在标签上,没有完全脱离HTML标签。

b.css样式代码让标签结构繁重,不利于HTML结构和解读。

c.一个内联式的CSS代码,只能给一个标签使用,如果多个标签有相同的样式,同样的CSS代码徐奥书写多次,增加代码量。

 因此,实际工作中不会使用内联式(行内式)编写CSS代码。

2. 内嵌式

① 内嵌式简介

书写位置:在HTML文件中,<head> 标签内部有一个<style> 标签。

<style> 标签书写在<title> 标签后面,所有CSS代码书写在<style> 标签内部。

<style>标签有意标签属性叫做type,属性值是“text/css”。

<style type="text/css">
    div {
        width:100px;
        height:100px;
        background-color:pink;
}
</style> 

② 内嵌式特点

优点 缺点

a.实现了结构和样式的初步分离,css只负责样式,HTML负责结构。

b.多个标签可以利用一段代码设置相同的样式,节省代码量。

a.结构和样式并没有完全分离,代码依旧写在HTML吻技安的<style>标签内部。

b.css样式只能给一个HTML文件使用,不能够被多个HTML文件同时利用。

c.在HTML中如果CSS代码太多,会造成文件头重脚轻。

 

3.外联式

<link rel="stylesheet" href="目标文件路径.css" type="text/css">

优点:

a. 实现了HTML和CSS完全分离

b.多个HTML文件可以公用一个CSS文件,便于提取公共CSS,减少代码

 

4.导入式

?书写位置:在内嵌式样式表 <style> 标签内部,或者在外联式样式表内部,导入其他的外部的 .css 文件。
?导入方式:利用一条 @import url(路径) 语句进行引入。
<style>
    @import url(css/01.css);
    div {
        border-color: #00f
    }
</style>

导入式问题:

?导入式样式表的作用与外联式样式表基本相同。
?但是由于导入式在浏览器中加载时,会在 HTML 结构加载完毕后再进行编译,如果网速比较慢时,会导致网页出现没有 css 样式的效果,给用户的体验不好。
?实际工作中,较少使用导入式,推荐使用外联式样式表。
 
注:
?小型案例:可以使用内嵌式 CSS。
?实际工作、大型网站项目:推荐使用外联式 CSS。
 
习惯代码书写风格
1.CSS 样式格式
展开格式:开发过程使用,代码可读性强,便于调错
<style>
  div {
    width: 200px;
    height:200px;
    background-color: skyblue;
            margin-bottom: 10px;
    }
</style>

2.英文大小写

CSS中的英文可以用大写,也可以用小写。

建议:CSS中的选择器和样式属性名,属性值等都使用小写英文特殊情况除外。

 

 

HTML 网页开发、CSS 基础语法——十.CSS语法

原文:https://www.cnblogs.com/0902-zjq/p/14258588.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!