HTML 网页开发、CSS 基础语法——十.CSS语法
CSS代码书写位置
<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>
@import url(css/01.css);
div {
border-color: #00f
}
</style>
导入式问题：
<style>
div {
width: 200px;
height:200px;
background-color: skyblue;
margin-bottom: 10px;
}
</style>
2.英文大小写
CSS中的英文可以用大写，也可以用小写。
建议：CSS中的选择器和样式属性名，属性值等都使用小写英文特殊情况除外。
HTML 网页开发、CSS 基础语法——十.CSS语法的更多相关文章
- IOS-网络（网页开发-UIWebView，HTML，CSS，JavaScript，OC和JS代码互调）
一.网页基础 // // ViewController.m // IOS_0218_网页开发1 // // Created by ma c on 16/2/18. // Copyright © 201 ...
- CSS基础知识及其基本语法
一.什么是CSS CSS 是层叠样式表( Cascading Style Sheets ) 的简称. 有时我们也会称之为CSS 样式表或级联样式表. CSS 也是一种标记语言 CSS 主要用于设置HT ...
- CSS基础(html＋css基础)
css: CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 1.CSS代码语法: css ...
- CSS基础语法和CSS经常用到的知识点总结
1. [代码]css基础教程 CSS基础语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.每条声明由一个属性和一个值组成.每个属性有一个值.属性和值被冒号分开.例如:下面这行代 ...
- css基础--简单介绍css
--引入 什么是css? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解 ...
- CSS基础4——使用CSS格式化元素内容的文本
CSS的文本属性用于控制文本的段落格式,如设置首行缩进.段落对齐方式.字间距.行间距等. 1.设置文本首行缩进:text-indent 可选属性值包含: 长度 / 百分比 2.设置文本对齐方式:tex ...
- CSS基础3——使用CSS格式化元素内容的字体
1.CSS属性单位: (1)长度单位:包含绝对长度单位和相对长度单位 绝对长度单位包含:cm.mm.in.pt.pc等. 绝对长度单位最好用于打印输出设备.在仅作为频幕显示时.绝对长度值并没有什么意义 ...
- CSS基础学习 21.CSS居中总结
注意:*在IE中并不代表通配符的意思,是代表根元素的意思,所以为了匹配适应各种浏览器,进行页面初始化 <style> *{ margin:0; padding:0; } </styl ...
- CSS基础学习-12.CSS position
绝对定位 position:absolute,元素脱离文档流,然后使用left.right.top.bottom属性相对于其最接近的一个具有定位属性的祖先元素进行绝对定位.如果不存在这样的祖先元素,则 ...
随机推荐
- Linux放大缩小字体的快捷键
linux终端窗口字体缩放快捷键 环境:linux, 打开终端, 'ctrl' + '-'字体缩小,一行显示更多的内容 'ctrl' + 'shift' + '+'字体变大 ctl+shift+(+) ...
- 解决springboot在mac电脑下启动过慢的问题
自从用了mac以后,springboot启动的时候一直卡在build环节10多秒 但是在linux和Windows环境下,启动只要6秒,后面查看了一下其他 人也遇到这种问题,原来是需要在hosts文件 ...
- C#基础知识---？为何物
一. 可空类型修饰符(?)引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; 是正确的,int i=null; 编译器就会报错.可空类型的出现, ...
- Swagger2.X注解
常用到的注解有: 作用范围 API 使用位置 协议集描述 @Api 用于controller类上 协议描述 @ApiOperation 用在controller的方法上 非对象参数集 @ApiImpl ...
- LeetCode42. 接雨水（java）
42.接雨水 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图,在这种 ...
- Maven使用--基本入门
maven学习(上)- 基本入门用法 转载自:https://www.cnblogs.com/yjmyzz/p/3495762.html 参考: http://www.cnblogs.com/dave ...
- 简析时序数据库 InfluxDB
时序数据基础 时序数据特点 时序数据TimeSeries是一连串随时间推移而发生变化的相关事件. 以下图的 CPU 监控数据为例,同个 IP 的相关监控数据组成了一条时序数据,不相关数据则分布在不同的 ...
- 用CUDA写出比Numpy更快的规约求和函数
技术背景 在前面的几篇博客中我们介绍了在Python中使用Numba来写CUDA程序的一些基本操作和方法,并且展示了GPU加速的实际效果.在可并行化的算法中,比如计算两个矢量的加和,或者是在分子动力学 ...
- dotnet OpenXML 读取 PPT 内嵌 ole 格式 Excel 表格的信息
在 Office 中,可以在 PPT 里面插入表格,插入表格有好多不同的方法,对应 OpenXML 文档存储的更多不同的方式.本文来介绍如何读取 PPT 内嵌 ole 格式的 xls+ 表格的方法 在 ...
- Springboot自带定时任务实现动态配置Cron参数
同学们,我今天分享一下SpringBoot动态配置Cron参数.场景是这样子的:后台管理界面对定时任务进行管理,可动态修改执行时间,然后保存入库,每次任务执行前从库里查询时间,以达到动态修改Cron参 ...