玩转CSS的前生今生与基础语法,选择器的使用

1.为什么需要CSS?   

        HTML 标签原本被设计为用于定义文档内容。通过使用

这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局(比如字体啥颜色,是否缩进等样式)由浏览器来完成,而不使用任何的格式化标签。由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和样式(如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

       为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。目前所有的主流浏览器均支持层叠样式表。为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表。有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁,也将文档的显示样式和结构内容实现了解耦,开发起来更加灵活。

       样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。

2.什么是CSS 

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素,比如字体颜色,大小,是否加粗,缩进等样式。
  • 样式通常存储在样式表中,这样文档的样式实现了与内容解耦开发。
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件
  • 多个样式定义可层叠为一混合使用,一个样式表也可以渲染多个文档内容模块

3.CSS的使用

3.1 css基本语法

   选择器是将样式和页面元素关联起来的名称(如标签名),属性是希望设置的样式属性每个属性有一个或多个值

选择器 { 属性:值; 属性:值; 属性:值;}

 3.2CSS页面引入的方法

1、外联式:通过link标签,链接到外部样式表到页面中

一般HTML文档内容和渲染其的样式表分开文件存储,如下,在当前文件夹CSS下,新建一个main.css文件,在里面写上对div模块文档样式的渲染语法如下:

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

 

2、嵌入式:通过style标签,在网页上创建嵌入的样式表

     这种用法一般可以在网站的首页中使用,将样式表直接嵌入到HTML,有利于性能的优化,这样用户在访问网页首页的时候可以快速进行加载,比如淘宝网首页就是如此使用。


3、内联式:通过标签的style属性,在标签上直接写样式

这种方式不需要选择器,直接通过属性的方式实现样式内嵌。

......

      下面演示3种CSS页面引入方法的使用,这样CSS的使用,将文档的内容与样式解耦了,HTML只负责了文档的结构和内容,CSS负责文档内容的样式渲染。




	
	Document
	 
	

	 
	




	

页面标题

这是一个div标签
百度一下

3.3 常用的应用文本的css样式

  • color 设置文字的颜色,如: color:red;
    css颜色值主要有三种表示方法:

    1、颜色名表示,比如:red 红色,gold 金色

    2、rgb表示,比如:rgb(255,0,0)表示红色

    3、16进制数值表示,比如:#ff0000 表示红色,这种可以简写成 #f00

  • font-size 设置文字的大小,如:font-size:12px;默认大小是16px.

  • font-family 设置文字的字体,如:font-family:'微软雅黑';

  • font-style 设置字体是否倾斜,如:font-style:'normal'; 设置不倾斜,font-style:'italic';设置文字倾斜

  • font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

  • line-height 设置文字的行高,设置行高相当于在每行文字的上下同时加间距, 如:line-height:24px;玩转CSS的前生今生与基础语法,选择器的使用_第1张图片

  • font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写: font:是否加粗 字号/行高 字体;如: font:normal 12px/36px '微软雅黑';

  • text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉

  • text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24pxtext-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中




	
	常用文本样式
	


	

样式演示

样式演示1

HTMLHyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。

这是一个p标签1

这是一个p标签2

百度网的链接

3.4 css选择器的使用详解

       上面使用我们大致知道了,CSS样式嵌入页面的3种方式,其中嵌入式使用的就是选择器进行样式嵌入。所谓的选择器就是一个我们指定的的需要渲染模块的名称,上面一般使用的选择器名称就是HTML标签名称,基于HTML的标签模块进行格式渲染,但是实际效果来说,范围还是太大,比如div选择器,会对所有的div模块进行统一格式样式,那就有点过了。

1、标签选择器

标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。
举例:

*{margin:0;padding:0}
div{color:red}   


....
....

2、id选择器

        通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。
举例:

#box{color:red} 

....

3、类选择器

         通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。
举例:

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

....

....

....

下面就签选择器,id选择器和类选择器的综合使用案例如下:注意如果同一个内容通过标签选择器,id选择器 ,类选择器同时修饰,后者会覆盖前者的样式。




	
	css选择器
	


	
这是第1个div
这是第2个div
这是第3个div
这是第4个div
这是第5个div

这是一个p标签

 结果显示如下:玩转CSS的前生今生与基础语法,选择器的使用_第2张图片

4、层级选择器

    主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。
举例:




	
	Document
	


	
层级选择器主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。 层级选择器主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。 层级选择器主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。
层级选择器主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。 层级选择器主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。 层级选择器主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。

玩转CSS的前生今生与基础语法,选择器的使用_第3张图片

5、组选择器

多个选择器,如果有同样的样式设置,可以使用组选择器。
举例:




	
	Document
	


	
这是第一个div
这是第二个div
这是第三个div

 

6、伪类及伪元素选择器

常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态,伪元素选择器有before和after,它们可以通过样式在元素中插入内容。注意通过before,after插入的内容无法选中。




	
	Document
	


	百度一下
	
这是第一个div
这是第二个div

统一声明:关于原创博客内容,可能会有部分内容参考自互联网,如有原创链接会声明引用;如找不到原创链接,在此声明如有侵权请联系删除哈。关于转载博客,如有原创链接会声明;如找不到原创链接,在此声明如有侵权请联系删除。

 

你可能感兴趣的:(爬虫后端开发需掌握的前端知识)