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. 使用msp432搭建的平衡小车(一)

    1.前言 笔者是一名大二学生曾经荒废一年学业,现在不断学习,所以有任何问题都希望讨论提出,你们的支持就是我的动力. 关于硬件搭建的步骤,笔者就不提网上方案太多了,笔者使用编码器电机,驱动采用tb661 ...

  2. Java之Spring基础与IoC

    Spring About Spring 开源免费框架,轻量级,非入侵式框架.Spring就是一个轻量级的控制反转(IOC)和面向切片编程(AOP)的框架 Maven repo:Spring Web M ...

  3. chcon命令详解

    导读 chcon命令是修改对象(文件)的安全上下文,比如:用户.角色.类型.安全级别.也就是将每个文件的安全环境变更至指定环境.使用--reference选项时,把指定文件的安全环境设置为与参考文件相 ...

  4. CSS3图片倒影技术

    http://bbs.itheima.com/thread-330315-1-1.html?wymlxt

  5. python的GUI框架tkinter,实现程序员的流氓式表白逻辑

    导入依赖 '''导入依赖''' import tkinter as tk import tkinter.messagebox as msg 创建并隐藏根窗口 '''创建并隐藏根窗口''' root_w ...

  6. 手把手教你AspNetCore WebApi:Swagger(Api文档)

    前言 小明已经实现"待办事项"的增删改查,并美滋滋向负责前端的小红介绍Api接口,小红很忙,暂时没有时间听小明介绍,希望小明能给个Api文档.对于码农小明来说能不写文档就尽量不要写 ...

  7. COM笔记-类厂

    CoCreateInstance实际上并没有直接创建COM组件 ,而是创建了一个被称作是类厂的组件.而所需的组件正是由些类厂创建的.类厂组件的唯一功能就创建其他的组件.创建组件的标准接口是IClass ...

  8. C# 中的反射机制

    C# 中的反射 首先我们通过两个实例来说明反射的大体概念.B超:大家体检的时候大概都做过B超,B超可以透过肚皮探测到你内脏的生理情况.这是如何做到的呢?B超是B型超声波,它可以透过肚皮通过向你体内发射 ...

  9. Linux中的静态库与动态库

    什么是库文件? 库文件是事先编译好的方法的合集.比如:我们提前写好一些数据公式的实现,将其打包成库文件,以后使用只需要库文件就可以,不需要重新编写. Linux系统中: 1.静态库的扩展名为.a:2. ...

  10. Lyndon 相关的炫酷字符串科技

    浅谈从 Lyndon Words 到 Three Squares Lemma By zghtyarecrenj 本文包括:Lyndon Words & Significant Suffixes ...