学习笔记2017.07.07-day5,pm-CSS语法-CSS-ID和CLASS-CSS背景-CSS文本
来源:互联网 发布:网络运营管理 编辑:程序博客网 时间:2024/04/28 03:47
通过使用 CSS 我们可以大大提升网页开发的工作效率!
什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
此为CSS样式表的语法:CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明
id 和 class 选择器
如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
如: id="para1":
class 选择器
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
如:.center {text-align:center;}
如何插入样式表
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部
浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。
内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表
内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性
不要在属性值与单位之间留有空格(如:"margin-left: 20 px" ),正确的写法是 "margin-left: 20px"
多重样式
如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来
多重样式优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下,优先级如下:
内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
CSS 背景属性
所有CSS文本属性。
- 学习笔记2017.07.07-day5,pm-CSS语法-CSS-ID和CLASS-CSS背景-CSS文本
- CSS学习笔记(Day5)
- 【CSS学习】CSS Id 和 Class
- css-day5-个人学习笔记
- CSS Id和Class
- css学习笔记20160116背景文本
- CSS学习笔记(四):文本、颜色和背景
- CSS学习笔记(1)CSS基础语法/字体/文本
- 【CSS学习】CSS 背景
- css学习之id和class选择器
- 【CSS学习】CSS语法
- css---使用class和id
- css中的id和class
- css - id和class选择器
- CSS中的id和class
- CSS学习笔记(八)CSS 背景
- CSS学习笔记(九)CSS 文本
- CSS学习笔记1--CSS语法基础
- PHP7.0的新特性
- 【LeetCode解题】3#Longest Substring Without Repeating Characters
- POJ
- Python切换版本
- sql运算符
- 学习笔记2017.07.07-day5,pm-CSS语法-CSS-ID和CLASS-CSS背景-CSS文本
- iOS大文件分片上传和断点续传 标签: iOS大文件分片断点续传获取视频获取图片 2016-05-17 15:52 4881人阅读 评论(8) 收藏 举报 分类: 技术—iOS 版权声明:本文为博
- Javascript基础(三)原型和原型链
- jdk明明是1.7满足Dynamic Web Module 3.0的要求可还是报错Dynamic Web Module 3.0 requires Java 1.6 or newer
- 学习了python的基本语法之后
- easyui-combotree的使用!多选的诀窍,该死的说明手册values
- java与xml之JDOM生成和解析XML文档
- js校验数字、正则表达式
- Python 通过difflib模块实现文件内容差异对比