HTML基础——css入门

网页文字的颜色、粗体、背景、行间距和左右两列的排版等,都是通过CSS控制的

颜色属性:  color:属性值;(注意分号)

背景属性:background:属性值;

浮动属性:float:属性值;

字体属性:font:属性值;

CSS非常灵活,既可以嵌入在HTML文档中,也可以是一个单独的外部文件,如果是独立的文件,则必须以.css为后缀名

列如:HTML基础——css入门

注意:运用CSS3私有属性时,要遵从一定的书写顺序,即先写私有的CSS3属性,再写标准的CSS3属性。 当一个CSS3属性成为标准属性,并且被主流浏览器的最新版普遍兼容的时候,就可以省略私有的CSS3属性。

CSS样式规则:选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

在上面的样式规则中,选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。其中,属性和属性值以“键值对”的形式出现,用英文“:”连接,多个“键值对”之间用英文“;”进行区分

CSS样式中的选择器严格区分大小写,属性和值不区分大小写,按照书写习惯一般将“选择器、属性和值”都采用小写的方式

 多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略,但是为了便于增加新样式最好保留

 如果属性的值由多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号

 在编写CSS代码时,为了提高代码的可读性,通常会加上CSS注释。

在CSS代码中空格是不被解析的,花括号以及分号前后的空格可有可无

引入CSS样式表

行内式也称为内联样式,是通过标记的style属性来设置元素的样式

语法格式:<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>

内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中,并且用<style>标记定义

语法格式:<head> <style type="text/css"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head>

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link />标记将外部样式表文件链接到HTML文档中

语法格式:<head> <link href="CSS文件的路径" type="text/css" rel="stylesheet" /> </head>

导入外部样式表:用@import,在<head>与</head><style type="text/css">   <!-- @import "*.css" --> </style>

外部讲解:https://www.w3cschool.cn/css/css-quote.html

选择器

标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式

语法格式:标记名(p,h1之类的){属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

类选择器使用“.”(英文点号)进行标识,后面紧跟类名

语法格式:.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:

语法格式:#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

通配符选择器用“*”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素

语法格式:*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签指定式选择器又称交集选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格,如h3.special或p#one。

后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代,(一个标记里包含了另外的标签)

并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同,可利用并集选择器为它们定义相同的样式,(求同去异)

字体的属性   (不写 默认显示)

HTML基础——css入门

HTML基础——css入门

HTML基础——css入门

HTML基础——css入门

HTML基础——css入门

HTML基础——css入门

HTML基础——css入门

HTML基础——css入门

color属性用于指定文本的颜色,其取值方式有如下三种

预定义的颜色值,如red,green,blue等。 十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。 RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)

letter-spacing属性用于定义字间距,所谓字间距就是字符与字符之间的空白

其属性值可为不同单位的数值,允许使用负值,默认为normal

word-spacing属性用于定义英文单词之间的间距,对中文字符无效

用于定义英文单词之间的间距,和letter-spacing一样,其属性值可为不同单位的数值,允许使用负值,默认为normal

line-height属性用于设置行间距,所谓行间距就是行与行之间的距离,即字符的垂直间距,一般称为行高

常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px

text-transform属性用于控制英文字符的大小写

其可用属性值如下: none:不转换(默认值)

 capitalize:首字母大写

 uppercase:全部字符转换为大写

lowercase:全部字符转换为小写。

text-decoration属性用于设置文本的下划线,上划线,删除线等装饰效果

其可用属性值如下: none:没有装饰(正常文本默认值)

 underline:下划线

overline:上划线

line-through:删除线

text-decoration属性用于设置文本的下划线,上划线,删除线等装饰效果

其可用属性值如下: left:左对齐(默认值) right:右对齐  center:居中对齐。

text-indent属性用于设置首行文本的缩进

其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值, 建议使用em作为设置单位

white-space属性可设置空白符的处理方式

其属性值如下: normal:常规(默认值),文本中的空格、空行无效,满行(到达区域边界)后自动换行

 pre:预格式化,按文档的书写格式保留空格、空行原样显示

nowrap:空格空行无效,强制文本不能换行,除非遇到换行标记<br />

内容超出元素的边界也不换行,若超出浏览器页面则会自动增加滚动条。

颜色值的缩写:十六进制颜色值是由#开头的6位十六进制数值组成,每2位为一个颜色分量,分别表示颜色的红、绿、蓝3个分量。当3个分量的2位十六进制数都各自相同时,可使用CSS缩写。

文本外观属性 

text-shadow属性可以为页面中的文本添加阴影效果

选择器{    text-shadow:h-shadow v-shadow blur color;}

text-overflow属性用于标示对象内溢出的文本

选择器{text-overflow:属性值;}

text-overflow属性的常用取值有两个: clip:修剪溢出文本,不显示省略标记“…”。 ellipsis:用省略标记“…”标示被修剪文本,省略标记插入的位置是最后一个字符

HTML基础——css入门

HTML基础——css入门

层叠性:所谓层叠性是指多种CSS样式的叠加

继承性:所谓继承性是指书写CSS样式表时,子标记会继承父标记的某些样式,如文本颜色和字号

HTML基础——css入门

优先级:定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题

HTML基础——css入门

特殊情况:继承样式的权重为0。 行内样式优先。

权重相同时,CSS遵循就近原则

 CSS定义了一个!important命令,该命令被赋予最大的优先级。

复合选择器的权重为组成它的基础选择器权重的叠加,但是这种叠加并不是简单的数字之和