HTML 网页开发、CSS 基础语法——十.CSS语法
2024-08-29 07:18:03
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中的选择器和样式属性名,属性值等都使用小写英文特殊情况除外。
最新文章
- LINQ(集成化查询)
- Mac系统下,在android studio中使用Github版本管理
- eclipse中新建python项目报错:Project interpreter not specified
- redis哨兵配置主从
- php中array_flip数组翻转
- 解决python中json模块loads出来的结构都是unicode的问题
- [转]ASP.NET MVC 入门8、ModelState与数据验证
- Android Studio稍微较新的版本下载
- hdu 4185 Oil Skimming(二分图匹配 经典建图+匈牙利模板)
- 第三方工具 - 关于echarts下钻功能的一些总结.js
- 6个常见的php安全攻击
- Python3.6 运行提示 ImportError: cannot import name &#39;CONFIG_FILE&#39;
- IntelliJ IDEA(四) :Settings(上)
- Laravel - Union + Paginate at the same time? and another problem----1222 The used SELECT statements have a different number of columns (SQL: (select count(*) as aggregate from
- AI 矩阵求导
- 导入Unity插件时出现Failed to import package with error: Couldn&#39;t decompress package
- Upgrade Win10
- SQL必知必会摘要
- 阿里云搭建hadoop集群服务器,内网、外网访问问题(详解。。。)
- Qt 编译boost
热门文章
- NOIP 模拟 $16\; \rm Star Way To Heaven$
- 题解 block
- 深入浅出Mybatis系列(三)---配置简介(mybatis源码篇)
- 再也不用担心了,微软官方系统(win10为例)U盘安装教程
- Mybatis映射器(二)
- Learning ROS: Ubuntu16.04下kinetic开发环境安装和初体验 Install + Configure + Navigating(look around) + Creating a Package(catkin_create_pkg) + Building a Package(catkin_make) + Understanding Nodes
- Kafka内外网访问
- 记一次线上问题 → 对 MySQL 的 ON UPDATE CURRENT_TIMESTAMP 的片面认知
- 灵魂画手:漫画图解 SSH
- windows 安装pip 及更换pip国内源