笔记|初探CSS(一)

简介: 初探CSS

CSS(层叠样式表):用来规定HTML文档的呈现形式(外观和格式编排)。


1、定义和应用样式

css样式由一条或多条以分号隔开的样式声明组成。每条声明包含一个CSS属性和该属性的值,二者以冒号分隔。


background- color:grey;color:white
第一条将background- color属性的值设置为grey,第二条将color属性的值设置为white。


1.1、使用元素内嵌样式

样式定义了还需被应用,把样式应用到元素身上的各种方式中,最直接的是使用全局属性style。


<a href="http://apress.com"style="background-color:grey; color:white">

1.2使用文档内嵌样式

用style元素(而不是style属性)定义文档内嵌样式,通过CSS选择器指示浏览器应用样式。


<style type="text/css">
a {
background-color:grey;
color:white;
}
</style>

一个style元素中可以定义多条样式,为此只需要重复定义一个选择器和一套样式声明的过程即可。


<style type="text/css">  
 a {               
background-color:grey;    
color:white;       
}
span {
border: thin black solid;
padding: 10px;
}            
</style>


1.3使用外部样式表

如果有一套要用于多个HTML文档,那么与其在每一个文档中重复定义相同的样式,创建一个独立的样式表文件。 以.css为文件扩展名。


导入外部样式表:


<link rel="stylesheet" type="text/css" href="styles.css"></link>

为每个样式表使用一个link元素。导入顺序很重要。


①从其他样式表中导入样式


用@import语句将样式从一个样式表导入另一个样式表


@import "styles.css";    
span {     
border: medium black dashed;      
padding: 10px;    
 }

根据W3C标准,@import规则必须在其他合法的@规则和样式规则之前,除了@charset。否则,@import不会生效。


②声明样式表的字符编码


在CSS样式表中可以出现在@import语句之前的只有@charset语句。



如果样式表中未声明所使用的字符编码,那么浏览器将使用载入该样式表的HTML文档声明的编码。默认情况下使用的是UTF-8


目录
相关文章
|
3月前
|
前端开发 JavaScript 开发者
理解CSS | 青训营笔记(3)
理解CSS | 青训营笔记(3)
35 0
|
3月前
|
机器学习/深度学习 编解码 前端开发
理解CSS | 青训营笔记(2)
理解CSS | 青训营笔记
36 0
|
3月前
|
前端开发 容器
理解CSS | 青训营笔记(1)
理解CSS | 青训营笔记
50 0
|
6月前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
81 2
|
6月前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
66 1
|
6月前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
104 1
|
6月前
|
前端开发 JavaScript 容器
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
53 1
|
6月前
|
前端开发 JavaScript UED
CSS3选择器详解 前端开发入门笔记(六)
CSS3选择器详解 前端开发入门笔记(六)
78 1
|
6月前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
36 0
|
6月前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
73 0