您的位置:首页 - 教程 - CSS - 正文
CSS 入门知识


 

CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。

 

CSS 代码语法

css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:

css语法

选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。

声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔。

 


 

 

从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式嵌入式外部式三种。

内联式 css样式表就是把css代码直接写在现有的HTML标签中。

嵌入式 css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间。

外部式 css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内, eg : <link href="style.css" rel="stylesheet" type="text/css" /> 

 

优先级:内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。即 <link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。其实总结来说,就是--就近原则(离被设置元素越近优先级别越高

 


 

 

什么是选择器?

在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

标签选择器:标签选择器其实就是html代码中的标签。 p{font-size:12px;line-height:1.6em;} 

类选择器 : .类选器名称css样式代码; }        // 用 (.)

ID选择器:  #setGreen{ color:green; }   // 用 (#)

  类和ID选择器的区别 相同点:可以应用于任何元素;不同点:1、ID选择器只能在文档中使用一次。2、可以使用类选择器词列表方法为一个元素同时设置多个样式。

子选择器:即大于符号(>),用于选择指定标签元素的第一代子元素。 .food>li{border:1px solid red;} 

包含(后代)选择器:包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。 .first span{color:red;} 

  子选择器和包含选择器区别:>作用于元素的第一代后代,空格作用于元素的所有后代

通用选择器:使用一个(*)号指定,它的作用是匹配html中所有标签元素。 * {color:red;} 

伪类选择器:它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色, a:hover{color:red;} 

  关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中,但是因为不能兼容所有浏览器,本教程只是讲了这一种最常用的)。其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。

分类选择符:当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色: h1,span{color:red;} 


评论: