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属性相对于其最接近的一个具有定位属性的祖先元素进行绝对定位.如果不存在这样的祖先元素,则 ...
随机推荐
- 使用msp432搭建的平衡小车(一)
1.前言 笔者是一名大二学生曾经荒废一年学业,现在不断学习,所以有任何问题都希望讨论提出,你们的支持就是我的动力. 关于硬件搭建的步骤,笔者就不提网上方案太多了,笔者使用编码器电机,驱动采用tb661 ...
- Java之Spring基础与IoC
Spring About Spring 开源免费框架,轻量级,非入侵式框架.Spring就是一个轻量级的控制反转(IOC)和面向切片编程(AOP)的框架 Maven repo:Spring Web M ...
- chcon命令详解
导读 chcon命令是修改对象(文件)的安全上下文,比如:用户.角色.类型.安全级别.也就是将每个文件的安全环境变更至指定环境.使用--reference选项时,把指定文件的安全环境设置为与参考文件相 ...
- CSS3图片倒影技术
http://bbs.itheima.com/thread-330315-1-1.html?wymlxt
- python的GUI框架tkinter,实现程序员的流氓式表白逻辑
导入依赖 '''导入依赖''' import tkinter as tk import tkinter.messagebox as msg 创建并隐藏根窗口 '''创建并隐藏根窗口''' root_w ...
- 手把手教你AspNetCore WebApi:Swagger(Api文档)
前言 小明已经实现"待办事项"的增删改查,并美滋滋向负责前端的小红介绍Api接口,小红很忙,暂时没有时间听小明介绍,希望小明能给个Api文档.对于码农小明来说能不写文档就尽量不要写 ...
- COM笔记-类厂
CoCreateInstance实际上并没有直接创建COM组件 ,而是创建了一个被称作是类厂的组件.而所需的组件正是由些类厂创建的.类厂组件的唯一功能就创建其他的组件.创建组件的标准接口是IClass ...
- C# 中的反射机制
C# 中的反射 首先我们通过两个实例来说明反射的大体概念.B超:大家体检的时候大概都做过B超,B超可以透过肚皮探测到你内脏的生理情况.这是如何做到的呢?B超是B型超声波,它可以透过肚皮通过向你体内发射 ...
- Linux中的静态库与动态库
什么是库文件? 库文件是事先编译好的方法的合集.比如:我们提前写好一些数据公式的实现,将其打包成库文件,以后使用只需要库文件就可以,不需要重新编写. Linux系统中: 1.静态库的扩展名为.a:2. ...
- Lyndon 相关的炫酷字符串科技
浅谈从 Lyndon Words 到 Three Squares Lemma By zghtyarecrenj 本文包括:Lyndon Words & Significant Suffixes ...