其他分享
首页 > 其他分享> > CSS前言

CSS前言

作者:互联网

一、简介

1.1css是什么

CSS:层叠样式表 (Cascading Style Sheets),用来渲染HTML标签的外观样式。例如设定元素的位置、颜色、大小等。

CSS是由万维网联盟(W3C)制定的标准。

CSS的目的是控制网页元素的外观与位置。

目前最新的版本是CSS3标准。

1.2css的主要作用

美化html元素的外观。

对网页元素进行布局、以及定位。

对html元素进行响应式布局。

实现动画效果以及2d、3d转换。

配合html、js完成网页特效。

在小程序、手机app混合开发 、网站开发中都使用CSS作为样式描述的方式。

1.3css的引入方式  

1、内联方式(内嵌式或行内式)

<p style="font-family: 楷体;font-size: 20px;">有梦想谁都了不起</p>

内联式引入方式无法提取公用的样式但优先级别最高,一般在UI的框架中可以通过内联样式替换模式样式,或在js中通过内联样式设定修改样式。

2、内部样式

嵌入式(Embedding):也叫内页样式,在网页上使用style标签包裹样式代码。 (不推荐)

<style>p{font-size: 20px;color: red;}</style>

3、外部样式

外联式(Linking):也叫外部样式,声明当前网页关联外部样式文件。(建议使用)

4、导入样式

<style>   @import url("css/style.css");   </style>

1.4样式优先级

内联样式的优先级最高,内部样式和外部样式,看谁在后面,优先显示谁。

先刷的被覆盖掉。

二、语法规则

2.1css语法

选择器:用于选择需要添加样式的元素。

属性(property):样式的属性名称,例如color代表颜色。 

取值与单位:属性对应的数值以及单位。

语法规则:用于修饰样式的css固定语法。            

注释:用户对css的程序描述,不执行。

css的其他特性

2.2css取值与单位

css通过取值与单位对属性进行描述,由于属性的性质不同,因此取值以及单位不同。

长度类取值单位:用于修饰长度,例如高度宽度等。

相对长度单位包括有: em(相对于当前标签内文本的字体尺寸), ex, rem(相对于根元素html字体大小),%(百分比,相对于父容器的百分比)。

绝对长度单位包括有: cm(厘米), mm(毫米), in(英寸), pt(点1pt = 1/72in ), pc(派卡1pc = 12pt ), px(像素)。

 长度单位的使用场景:

在pc端网页制作时一般采用px作为精确的长度单位。

在手机端开发时使用em、rem、%以及css3新增单位进行响应式布局。

2.3颜色类取值单位

用于修饰字体、背景等属性。

HEX:#ffffff:以16进制表示颜色,但是不能表示透明(最常用) 。

HSL:hsl(30%,50%,50%),由色调(H)、饱和度(S)、亮度(L)三个颜色通道,按百分比组合而成。

RGB:rgb(128,128,128),由光的三原色红色(R)、绿色(G)、蓝色(B),按比例组合而成。

RGBA: rgba(0,0,0,0.5),由光的三原色红色(R)、绿色(G)、蓝色(B)以及透明组合而成。优点是支持透明。(css3标准)

关键字:color:red,以颜色的英文名称表示颜色,但只能表示少量颜色。

颜色单位的使用场景:

在不需要透明显示时使用HEX作为颜色单位。

手机端或高版本浏览器中透明颜色可以使用RGBA。

2.4文本类特殊取值

用于修饰文本的特殊取值。

inherit:声明当前元素的属性继承父容器属性。

initial :声明当前元素的属性为默认属性。(css3,在IE中不兼容)

div { position: relative; } div a { position: inherit; }

其他取值范围

时间取值:s,ms例如在使用动画属性中使用

角度取值: deg 例如在使用变换属性中使用

2.5语法规则

css的特定的一组关键字,代表特定css规则。

 !important:设定样式渲染的应用优先权。该优先权大于引入方式的优先级别。但IE6以下不兼容。

<style>
	p{
		color: red !important;
	}
</style>
<body>
	<p style="color:green;">有梦想谁都了不起</p>
</body>

@import:引入外部css文件。

@charset:在外部样式表文件内使用。指定文件字符编码。

2.6注释

2.7其它特性

css的基本语法规则:

css的继承特性:特定的CSS属性向下传递到子孙元素。继承依据文档树的树型结构,目的是方便开发者开发。

      如果没有特殊声明,li将继承ul、body的部分css属性取值。

CSS样式继承的局限性:部分CSS的样式属性是无法被继承的,例如border。如下所示CSS中可以继承的属性。

CSS样式继承属性辅助记忆方式:

               2)子元素一旦声明了与父元素同属性的继承样式,则子元素的样式覆盖父元素的样式声明。

标签:前言,样式,元素,css,取值,CSS,属性
来源: https://www.cnblogs.com/xzwyb/p/16071525.html