CSS:html进阶

CSS简介

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化

下图是有无css修饰的网页图形对比(网址:www.w3school.com.cn)

 

<div>(CSS主要利用div盒进行封装)
        定义:DIV是层叠样式表( CSS )中的定位技术,全称 DIVision ,即为划分。
        主流布局方式:css+div
        等级:块级元素。
        为什么使用div+css?( https://www.php.cn/css-tutorial-420806.html

CSS语法规范

CSS规则有两个主要部分组成:选择器以及一条或多条声明

        键值对:一个属性对应一个值出现的就叫做键值对。

        属性:对指定的对象设置样式属性,例如字体大小、文本颜色等。

        注意事项:属性和属性值之间用英文 : 分开

                          多个“键值对”之间用英文 ; 进行区分

CSS代码风格

样式书写格式:

h3{
    color: red;
}

样式大小写:除特殊情况外,选择器、属性名、属性值关键字都使用小写字母

空格规范:①属性值前面,冒号后面,保留一个空格

                  ②选择器(标签)和大括号中间保留一个空格

CSS样式引入方式:内部

内联方式(不推荐):直接在 HTML 标签中的 style 属性中添加 CSS

<div style=“background: red”>我是内联</div>

嵌入方式:在 HTML 头部中的 <style> 标签下书写 CSS 代码

<head>
      <style>
          .nav {
             color: red;
          }
      </style>
 </head>

只对当前HTML文件起作用,如有多种样式或使用这些样式的文件过多,容易造成代码冗余,非常不利于维护

CSS样式引入方式:外部

链接方式(吐血推荐)使用 HTML 头部的 <head> 标签引入外部的 CSS 文件

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

这是最常见的也是最推荐的引入 CSS 的方式。这种方式CSS 代码只存在于单独的 CSS 文件中,具有良好的可维护性,并且可以在加载页面时提高效率

导入方式使用 CSS 规则引入外部 CSS 文件

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

导入式出现较晚,书写难度高,加载顺序低,更推荐链接式引入CSS

CSS基础选择器:标签选择器

标签选择器(元素选择器):是指用HTML标签名称作为选择器,按标签名进行分类,为页面内某一类(所有)标签指定统一的CSS样式。

语法:

标签名 {
	   属性1: 属性值1; 
}

示例:

p {
  color: red;
  font-size: 20px;
 }

CSS基础选择器:类选择器

类选择器:在需要差异化选择不同标签的时候,单独选择一个或几个标签,可以使用类选择器

                 类选择器在HTML中以class属性表示,在CSS中以一个 . 显示。

语法:

.类名 {
        属性1: 属性值1; 
}

示例:

.font36 {
         font-size: 36px;
}
注意
类选择器使用英文的 ” . ” 进行标识,其后紧跟类名(自己命名)。
长名称或词组可以使用中横线来命名。
不要使用纯数字、中文命名。
命名尽量有意义,让别人一眼就知道此类名的目的。

             命名规范:https://www.qianduan.net/css-selectors-naming-2/

CSS基础选择器:多类名选择器

多类名选择器

书写格式:

        在标签class属性中写多个类名。

        多个类名之间必须用空格分开。

        该标签可以分别具有这些类名的样式。

 举例:

<div class=“red font36”>字体颜色为红色,大小36px</div>

使用场景:好几个标签,颜色不同,但字体大小、字体相同。

CSS基础选择器:id选择器

id选择器:语法:

<p id=“grey”>灰色</p>

#grey {
          color: grey; 
}

id选择器与类选择器的区别

  ①类选择器(class)好比人的名字,一个人可以用多个名字,同时一个名字也能被多个人使用。    ②id选择器好比人的身份证,具有唯一性,不得重复。                                                                     ③id选择器和类选择器最大的不同就在于使用次数。                                                                          ④id选择器一般用于页面唯一性的元素上,常与JavaScript搭配使用。

CSS基础选择器:通配符选择器

使用“ * ”定义,表示选取页面中的所有元素(标签)

语法:

* {
      属性1: 属性值1;
}

注意:通配符选择器不需要调用,直接给所有元素(标签)使用样式。

          特殊情况使用。

CSS字体

font-family:用于定义文本的字体系列

尽量使用系统默认自带字体,保证任何用户的浏览器都能正确显示。

与font-face的区别:

        font-family:用于指定字体。设置后,电脑上无该字体时,观看网页不能显示该字体效

        font-face:载入一个字体。将该字体的.eot格式文件传到服务器上,用font-face加载到网页中。

最常见的几个字体:‘Microsoft Yahei’、‘Tahoma’、‘Arial’、‘Hiragino Sans GB

font-size:用于定义字体大小。px(像素)是网页最常用单位。

        注意:不同浏览器默认显示的字号大小可能不一致,尽量设置一个明确值大小,不要默认大小

font-weight:用于设置文本字体的粗细

属性值

描述

normal

默认值(不加粗)

bold

定义粗体(加粗)

100-900

400等同于normal700等同于bold,注意数字后不加单位

使用:有时用来让加粗标签(如<h><strong>)不加粗,或使其他标签加粗。实际开发中,更喜欢用数字表示字体大小。

font-style:用于设置文字样式

属性值

作用

normal

默认值,浏览器会显示标准的字体样式

italic

浏览器会显示斜体的字体样式

注意:网页中很少给文字加斜体,反而要把斜体标签(<em><i>)改成不倾斜的字体。

font复合属性:字体属性可以综合来写,节约代码

body {
      font: font-style   font-weight   font-size   line-height   font-family;
}

使用复合属性时,必须严格按照以上顺序书写,不能更换顺序,每个属性间用空格隔开

不需要设置的属性可以省略(默认),但必须保留font-sizefont-family属性,否则无效。

文本颜色color:预定义的颜色值(系统定义好的):red,green,blue,pink等

十六进制:#FF0000,#FF6600,#29D794等。与rgb相似,12位表示红色,34位表示绿色,56位表示蓝色。

RGB代码:rgb(255,0,0)rgb(100%,0%,0%)等。rgb值最小为0,最大为255rgb及三个值分别表示红、绿、蓝(三原色),其值既可以用数字表示也可以用百分比表示。

        注:开发中最常用的是十六进制。

文本对齐text-align:用于设置行内文本内容的水平对齐方式

属性值

解释

left

左对齐(默认)

right

右对齐

center

居中对齐

装饰文本text-decoration:用于规定添加到文本的修饰。可以添加上划线、下划线、删除线等。

属性值

描述

none

默认。没有装饰线(最常用)

underline

下划线,链接a自带下划线(常用)

overline

上划线(几乎不用)

line-through

删除线(不常用)

文本缩进text-indent:用来指定文本第一行的缩进,通常是将段落缩进

写法:

div {
     text-indent: 10px;
}

长度设置可以是负值。

em是一个相对单位,是当前元素(font-size1个文字的大小,如果没有设置大小,就会按照父元素的一个文字大小。

行间距line-height:用于设置行间距离(行高) ,可以控制文字行与行之间的距离。

CSS三大特性

层叠性

层叠性:相同选择器设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要用于解决样式冲突的问题。

层叠性原则:样式冲突时遵循就近原则,哪个样式离结构近,就执行哪个样式。

                      样式不冲突时,不会发生层叠。

继承性

继承性:子标签会继承父标签的某些样式,如文本颜色和字号。

使用技巧:父子元素之间如果有相同属性,此时使用继承可以简化代码。子元素可以继承父元素的样式(text-,font-,line-,这些元素开头的可以继承,以及color属性)http://www.cnphp.info/css-style-inheritance.htmlicon-default.png?t=N6B9http://www.cnphp.info/css-style-inheritance.html

优先级

优先级:当同一个元素指定多个选择器,就需要考虑优先级的问题。

        选择器相同,则执行层叠性。选择器不同,则根据选择器权重执行。

选择器权重如下表所示:

选择器

选择器权重

继承 或者 *

0000

元素选择器

0001

类选择器,伪类选择器

0010

ID选择器

0100

行内样式 style=“”

1000

!important 重要的

∞无穷大

CSS复合选择器

复合选择器:复合选择器是建立在基础选择器上,对基础选择器进行组合形成的。包括了后代选择器,子选择器,并集选择器,伪类选择器等等

并集选择器:给多个选择器赋予相同的样式。选择器之间用英文的“ , ”连接。选择器可以是标签名称,也可以是idclass名称。

实例:

<style>
	.font20,.font30 {
		color: red;
}
</style>

后代选择器(重要)后代选择器又称为包含选择器,可以选择父元素中的子元素。把外层标签写前面,把内层标签写在里面,中间用空格分隔。

语法:元素1  元素2  {   样式声明   }

        上述语法表示选择元素1中所有的元素2(后代元素)

实例:

ul  li  {   color:  red;   }

注意:元素1是父级,元素2是子集,最终选择的是元素2

           元素2可以是儿子,也可以是孙子,只要是元素1的后代即可。

           元素1和元素2可以是任意基础选择器。

子选择器(重要)子元素选择器(子选择器)只能作为某元素的最近一级子元素。

语法:元素1>元素2 { 样式声明 }

        上述语法表示选择元素1里面的所有直接后代(子元素)元素2

实例:

div > p { color: red; }

注意:元素1和元素2之间用大于号隔开

           元素1是父级,元素2是子级,最终选择的是元素2

           元素2必须是最近一级子元素,孙子、重孙等都不能选择

伪类选择器:伪类选择器用于向某些选择器添加特殊效果,比如给链接添加特殊效果,或选择第1个,第n个元素。

        伪类选择器最大的特点就是用冒号( : )表示,比如 :hover:active

链接伪类选择器:即a标签的伪类选择器

        a:link  选出没有点击过的(访问过的)链接

        a:active 选择鼠标正在按下,还未弹起的那个链接

        a:hover 选择鼠标经过的那个链接(最常使用)

        a:visited 选择点击过的(访问过的)链接

注意:为了确保样式生效,必须按照LVHA的顺序声明::link-:visited-:hover-:active

          a链接在浏览器中常常具有默认样式,所以实际工作中都要给链接单独制定样式。

伪元素选择器:使用伪元素选择器表示元素中特殊位置

        ::first-letter 首字母(只能用于块级元素)

        ::first-line 首行(只能用于块级元素)

        ::before在最前端添加内容(一般beforeaftercontent属性连用)

        ::after在最后面添加内容

文本级标签: p, span, a, b, I, u, em, (只能嵌套文字、图片、超链接)

容器级标签: div, h系列, li, dt, dd(能嵌套其他所有标签)

行内元素: 除了p之外,所有的文本级标签,都是行内元素。

块级元素: 所有的容器级标签,都是块级元素,以及p标签。

补充内容

行高的继承:行高可以跟单位也可以不跟

                如果子元素没有设置行高,则会继承父元素的行高,此时子元素的行高为:当前子元素的文字大小*父元素行高

                给body设置行高1.5,这样写法的优势就是里面子元素可以根据自己文字大小调整行高。(设置为1.5这种写法很常见,比如京东的网页元素就很多)

伪元素选择器first-child:用于选取属于其父元素的首个子元素的指定选择器。

语法:

元素名:first-child {
	color: red;
}