【温故知新】CSS学习笔记（样式表）

CSS-网页的美容师

CSS-Cascading Style Sheets 美化样式
通常叫做层叠样式表（级联样式表）。

CSS样式引入的方式有三种（书写位置）：

1、内部样式表

<head><meta charset="UTF-8"><title>Document</title><style>/*  选择器{ 属性：值； }  选择器是选择标签的 */th{color:skyblue;    }td{font-size:14px;}tr{height:30px;}</style>
</head>

直接写在head标签里面，统一更改。

2、行内式（内联样式）

<h3 style="color:pink;font-size:25px;">青春无悔，恋爱赶紧</h3>

<input type="text" value="北京" style="color:#ccc;" />

直接写在行标签内部里面，偶尔使用，不适合大批量使用。

3、外部样式表（外链式）

实际工作中以外部样式表为主。
外部样式表不用写style。
CSS文件：

div {color:red;
}

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style.css" />
</head>
<body><div>小帅哥</div><div>小靓妹</div><div>小骚货</div>
</body>
</html>

总结：
行内样式表：书写方便，权重高；没有实现样式和结构相分离；使用较少；控制一个标签；
内部样式表：部分结构和样式相分离；没有彻底实现样式和结构相分离；使用较多；控制一个页面；
外部样式表：完全实现结构和样式相分离；需要link来引入；使用最多，推荐使用；控制整个站点；

【温故知新】CSS学习笔记（样式表）相关推荐

HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
HTML+CSS学习笔记(2) - 认识标签（1）转载
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 http://www.cnblogs.com/wanglongshuai/p/5204070.html@ ...
CSS学习笔记 #20201119
CSS学习笔记 #20201119 目录文章目录 CSS学习笔记 #20201119 目录引言选择器权值样式引言 CSS能搭配HTML文档,将网页繁杂的样式信息从HTML文档中相对独 ...
css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
CSS学习笔记（详细）- 基础
CSS学习笔记从零开始代码风格样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器基础选择器标签选择器类选择器 - 开发最常用多类名 i ...
css学习笔记 day two
CSS学习笔记 Day two 13.3 css边框属性属性: 边框样式:border-style:solid/double/groove/ridge/insert/outset; 说明:第一个表示 ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...

【温故知新】CSS学习笔记（样式表）

【温故知新】CSS学习笔记（样式表）相关推荐

最新文章

热门文章