好程序员web前端分享CSS基础篇

简介: 学习目标1、CSS简介2、CSS语法3、样式的创建4、两种引入外部样式表的区别5、样式表的优先级和作用域6、CSS选择器7、选择器的权重8、浮动属性的简单应用9、HTML、CSS注释一、CSS简介css:层叠样式表 英文全名:cascading style sheets,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息的显示样式。

学习目标
1、CSS简介
2、CSS语法
3、样式的创建
4、两种引入外部样式表的区别
5、样式表的优先级和作用域
6、CSS选择器
7、选择器的权重
8、浮动属性的简单应用
9、HTML、CSS注释
一、CSS简介
css:层叠样式表 英文全名:cascading style sheets
,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息的显示样式。
目前推荐遵循的是W3C发布的CSS3.0.
用来修饰XHTML或者XML等样式文件的计算机语言。
1998年5月21日由w3C正式推出的css2.0
二、CSS语法
CSS语法:选择符{属性:属性值;属性:属性值;}

6
选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素.
属性:属性是指定元素所具有的属性,它是css的核心,css2共有150多个属性
属性值:属性值包括法定属性值及常见的数值加单位,如25px,或颜色值等。
说明:
1)每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值;
2)属性必须放在花括号中,属性与属性值用冒号连接。
3)每条声明用分号结束。
4)当一个属性有多个属性值的时候,属性值与属性值不分先后顺序。
5)在书写样式过程中,空格、换行等操作不影响属性显示。
三、样式的创建(内部样式表 外部样式表 内联样式表)
A、内部样式表
语法:

注:使用style标记创建样式时,最好将该标记写在

;
B、外部样式 
*方法一:外部样式表的创建:

说明:
使用link元素导入外部样式表时,需将该元素写在文档头部,即与之间。
rel(relation):用于定义文档关联,表示关联样式表;
type:定义文档类型;
*方法二:外部样式表的导入

注:@和import之间没有空格 url和小括号之间也没有空格;必须结尾以分号结束;
C、内联样式 (行间样式,行内样式,嵌入式样式、内嵌样式)
语法:<标签 style="属性:属性值;属性:属性值;">标签>
例:

四、两种引入外部样式表link和import之间的区别
扩展知识点:link和import导入外部样式的区别:
差别1:本质的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。
差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。
差别3:兼容性的差别:@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
差别4:使用dom(document object model文档对象模型 )控制样式时的差别:当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的.
五、样式表的优先级
A、内联样式表的优先级别最高
B、内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高。
C、作用域:内联样式的作用域最小,只能应用于当前元素,其次是内部样式表,能应用于当前HTML文件,最后是外部样式表,能应用于所有链接的HTML文件。
相关文章
|
2月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
256 91
|
1月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
157 1
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
33 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
1月前
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
22 4
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
52 2
|
1月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
1月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
53 2
|
2月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
66 28
|
1月前
|
存储 前端开发 JavaScript
CSS:现代Web设计的不同技术
【10月更文挑战第11天】 CSS:现代Web设计的不同技术
|
2月前
|
前端开发