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语法的更多相关文章

  1. IOS-网络（网页开发-UIWebView，HTML，CSS，JavaScript，OC和JS代码互调）

    一.网页基础 // // ViewController.m // IOS_0218_网页开发1 // // Created by ma c on 16/2/18. // Copyright © 201 ...

  2. CSS基础知识及其基本语法

    一.什么是CSS CSS 是层叠样式表( Cascading Style Sheets ) 的简称. 有时我们也会称之为CSS 样式表或级联样式表. CSS 也是一种标记语言 CSS 主要用于设置HT ...

  3. CSS基础(html＋css基础)

    css: CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 1.CSS代码语法: css ...

  4. CSS基础语法和CSS经常用到的知识点总结

    1. [代码]css基础教程     CSS基础语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.每条声明由一个属性和一个值组成.每个属性有一个值.属性和值被冒号分开.例如:下面这行代 ...

  5. css基础--简单介绍css

    --引入 什么是css? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解 ...

  6. CSS基础4——使用CSS格式化元素内容的文本

    CSS的文本属性用于控制文本的段落格式,如设置首行缩进.段落对齐方式.字间距.行间距等. 1.设置文本首行缩进:text-indent 可选属性值包含: 长度 / 百分比 2.设置文本对齐方式:tex ...

  7. CSS基础3——使用CSS格式化元素内容的字体

    1.CSS属性单位: (1)长度单位:包含绝对长度单位和相对长度单位 绝对长度单位包含:cm.mm.in.pt.pc等. 绝对长度单位最好用于打印输出设备.在仅作为频幕显示时.绝对长度值并没有什么意义 ...

  8. CSS基础学习 21.CSS居中总结

    注意:*在IE中并不代表通配符的意思,是代表根元素的意思,所以为了匹配适应各种浏览器,进行页面初始化 <style> *{ margin:0; padding:0; } </styl ...

  9. CSS基础学习-12.CSS position

    绝对定位 position:absolute,元素脱离文档流,然后使用left.right.top.bottom属性相对于其最接近的一个具有定位属性的祖先元素进行绝对定位.如果不存在这样的祖先元素,则 ...

随机推荐

  1. UWP AppConnection.

    https://www.cnblogs.com/manupstairs/p/14582794.html

  2. Dom4j(解析property)

    Dom4j(解析property) public class XpathTest { /** * XPath 使用路径表达式来选取 XML 文档中的节点或节点集 * * 经常使用到的路径表达式,如下 ...

  3. [ASP.NET MVC]@Html.AntiForgeryToken() 防止CSRF攻击

    MVC Html.AntiForgeryToken() 防止CSRF攻击 MVC中的Html.AntiForgeryToken()是用来防止跨站请求伪造(CSRF:Cross-site request ...

  4. 算法入门 - 链表的实现及应用（Java版本）

    之前我们学习了动态数组,虽然比原始数组的功能强大了不少,但还不是完全纯动态的(基于静态数组实现的).这回要讲的链表则是正儿八经的动态结构,是一种非常灵活的数据结构. 链表的基本结构 链表由一系列单一的 ...

  5. 微信小程序学习笔记四 页面的生命周期

    1. 生命周期 1.1 对应阶段说明 onLOad(Object query) 1.1 页面加载时触发, 一个页面只会调用一次, 可以在 onLoad的参数中获取打开当前页面路径中的参数 1.2 参数 ...

  6. CentOS_Server with GUI入门

    安装模式: Server with GUI:基本的桌面系统,包括常用的桌面软件,如文档查看工具 Minimal:基本的系统,不含有任何可选的软件包 Basic Server :安装的基本系统的平台支持 ...

  7. 对抗生成网络GAN

      该方法常用于: 图像生成 图像修复,训练用了MSE+Global+Local数据,其中Global+Local判别式用于全局+局部一致性. 图像超分辨率重构   GAN的基本原理,主要包含两个网络 ...

  8. 理解ASP.NET Core - [02] Middleware

    注:本文隶属于<理解ASP.NET Core>系列文章,请查看置顶博客或点击此处查看全文目录 中间件 先借用微软官方文档的一张图: 可以看到,中间件实际上是一种配置在HTTP请求管道中,用 ...

  9. Kickstart部署之FTP架构

    原文转自:https://www.cnblogs.com/itzgr/p/10029551.html作者:木二 目录 一 准备 1.1 完整架构:Kickstart+DHCP+VSFTP+TFTP+P ...

  10. Linux中MySQL的安装以及卸载

    一.MySQL MySQL是一种开放源代码的关系型数据库管理系统,开发者为瑞典MySQL AB公司.在2008年1月16号被Sun公司收购.而2009年,SUN又被Oracle收购.目前 MySQL被 ...