html day2 --CSS基础

一、CSS简介

注意:text-align/text-decoration/text-indent

CSS(cascading style sheets)WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页的显示样式。---级联样式表、层叠样式表

目前推荐遵循的是W3C发布的CSS3.0

     css3在包含了所有css2.0所支持的基础上改变了改进,css遵循的是模块式开发,发布的时间不是一个点而是一个时间段。

1998年5月21日由w3C正式推出的css2.0

   (在css1的基础上增加了高级功能,浮动,定位,高级选择器等(子选择器,相邻选择器,通用选择器)

1996年推出CSS1

  包含非常基本的属性,比如字体,颜色、空白边

历史

在使用CSS之前,Web开发人员依赖于一些特定的HTML标签和属性来增强网页的视觉体验,而依赖表格来进行布局设计。

和样式有关的一些HTML标签:

  •  定义整个网页文档的字体
  •  定义一个具体的字体类型,颜色和它所包含的文本大小
  •  水平居中它所包含的元素
  •  使文本变大
  •  为文本添加删除线

和样式有关的一些HTML属性:

  • bgcolor 定义元素的背景色
  • text 定义文本颜色
  • margin 定义元素的边距

在页面整体布局的设计上曾经广泛使用表格 

 元素。因为表格提供了一个可视化的网格(grid)使得创建列、对齐和定位页面中的各个元素要相对直观一些;

 

这些样式和布局方法有很多缺点:

(1)内置的HTML元素和属性,使得表现和内容绑定在一起,如果要提供多样式的网页,必然要提供多份HTML文档内容

(2)HTML表格的代码相当繁琐,需要很多公式化标签,吃力不讨好

(3)HTML表格标记用法是语义错误的: 表格应该只是用来组织多维数据的,而不是用来布局的

(4)改变布局需要更改标记:如果我们想把左边的列移到右边,我们得修改HTML文档结构

(5)HTML表格容易出现语法错误:行和列需要遵循严格的排序和嵌套关系

(6)HTML表格标记用法可读性差:需要使用嵌套表格来支持列中有列的布局,结构将变得非常复杂

这就是为什么内置HTML样式和使用表格进行布局在实践中已经逐渐被抛弃,转而使用div+CSS来代替的原因。

 

内容和表现分离的好处:

(1)同一份文档可以拥有不同的呈现,提高了文档的可复用性和设计灵活

(2) 内容和样式分离使得HTML文档精简清晰,可读性高

(3) 由于浏览器会缓存静态文件如CSS/JS,这将有助于提高网站性能和SEO评估

(4) 代码的可维护性好

 

二、css语法

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

选择符:表示要定义样式的对象

1)每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值;

2)属性必须放在{}内;

3)属性与属性值用冒号连接

4)当一个选择符有多个属性时,用分号隔开;

5)当一个属性有多个属性值时,用空格分隔;

6)使用空格、换行不影响css样式的显示。

简单样式

width:value+px;设置标签的宽度

height:value+px;设置标签的高度

background:#colorValue; 设置标签的背景颜色

color:#colorValue;设置文本颜色;而不是font-color

border:1px  solid  #colorValue;  设置标签的边框

边框类型:solid实线边框  double双线边框  dashed虚线(v. 猛冲/猛掷)  dotted点状线(v. 点缀布满)

样式表分类

样式:内部样式  外部样式 和 内联样式

1.内部样式

语法:

    

注:使用style标记创建样式时,最好将该标记写在里面;

2.外部样式

外部样式的建立及调用(@charset "utf-8";在外部样式表文件内使用。指定该样式表使用的字符编码。该规则后面的分号是必需的,如果省略了此分号,会生成错误信息。)

a:外部样式表的创建。         b:外部样式表的导入。

*方法 一

说明:使用link元素导入外部样式表时,需将该元素写在文档头部,即与之间。

*方法 二

注:@和import之间没有空格 url和小括号之间也没有空格;必须结尾以分号结束;

两种导入样式的区别

link和import导入外部样式的区别:

差别1:

     link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS。

差别2:

      加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。

差别3:

      兼容性的差别:@import是CSS2.1提出的,所以老的浏览器不支持,@import只在IE5以上的才能识别,而link标签无此问题。

差别4:

      使用dom控制样式时的差别:当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的

3.内联样式表(行间样式,行内样式,嵌入式样式)

语法:<标签 style="属性:属性值 ; 属性:属性值;">

 

样式表的优先级

内联样式表的优先级别最高,内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高

html day2 --CSS基础_第1张图片下面的优先级高

 

三、选择符(选择器)

1) 元素选择符/类型选择符(element选择器 )

语法:元素名称{属性:属性值;}

说明:元素选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span等。

用法:当统一或者改变文档某类元素的显示效果时,可以使用类型选择符;

2) id选择器

语法:#id名{属性:属性值;}

说明:

1)使用id选择符时,应该为每个元素定义一个id属性

2)id选择符的语法格式是:#id名{}

3) 起名时要取英文名,不能用关键字(所有的标记和属性都是关键字)

4)一个id名称只能对应文档中一个具体的元素对象,因为id只能定义页面中某一个唯一的元素对象。

5) 最大的用处:创建网页的外围结构。

3)class选择器

 语法:.class名{属性:属性值;}

说明: 使用类选择符时,为每个元素定义一个类名称,语法格式是:

  

,在css中使用方式为:.top{}

用法:1)class选择符更适合定义一类样式;

                 div.top{}   p.top{}:p标签下的有top类的那个元素

           2 ) 一个标记可以设置多个class名

          语法:<标记 class="名称1   名称2" >

          3)class名可以重复,class属性可以有多个属性值,中间用空格分割

4)群组选择器

      语法:选择符1,选择符2,选择符3{属性:属性值;}

说明:当有多个选择符应用相同的样式时,可以将选择符用“,”分隔的方式,合并为一组。

5) 包含选择器/后代选择符

        语法:选择符1   选择符2{属性:属性值;}----------选择符2只要是在选择符里面就可以了,不一定是子类,可以是祖孙类

说明:选择符1和选择符2用空格隔开,含义就是选择符1中包含的所有选择符2;

 

6) 伪类选择器(伪类选择符)

      语法 : :link{属性:属性值;}超链接的初始状态;

       :visited{属性:属性值;}超链接被访问后的状态;

       :hover{属性:属性值;}鼠标悬停,即鼠标划过超链接时的状态;(div ,p,span,li等等)

       :active{属性:属性值;}超链接被激活时的状态,即鼠标按下时超链接的状态;

说明:
1)当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为:a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效; 

2)使用与超链接相关的伪类选择符时,应为a元素定义href属性;

 

7)通配符

语法:*{属性:属性值;}

说明:通配选择符的写法是“*”,其含义就是所有元素。

用法:常用来重置样式

全局样式

*{margin:0;padding:0;}

margin:0 auto; 让子元素相对父元素水平居中显示

header会继承body的宽高,body会继承html的宽高,html会继承浏览器硬件页面的宽高

选择符权重

html day2 --CSS基础_第2张图片

html day2 --CSS基础_第3张图片

html day2 --CSS基础_第4张图片

3.对文本的设置是可以继承的,对border和bg的设置不能集成

 

html day2 --CSS基础_第5张图片

css中用四位数字表示权重,权重的表达方式如:0,0,0,0

类型选择符的权重为     0001

伪元素选择符的权重为  0001

class选择符的权重为    0010

属性选择符的权重为     0010

伪类选择符的权重为     0010

id选择符的权重为      0100

内联样式的权重为      1000

通配符的权重为          0000

子选择符(>)的权重为      0000 

继承样式的权重为      0000

兄弟选择符的权重为   0000

包含选择符的权重:为包含选择符的权重之和

 

扩展:

1.伪类选择符:

 

 

2.子选择器(IE6不支持)

子元素选择器只能选择作为某元素的子元素的元素,子选择器使用了大于号(这个大于号的权重是0,子结合符);

子结合符两边可以有空白符,因此,以下写法都没有问题:h1 > strong     h1> strong    h1 >strong     h1>strong  

 

3.相邻兄弟选择器(IE6不支持) +:

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器,相邻兄弟选择器使用加号“+”做为连接符。

普通兄弟选择器(IE6不支持) ~:

普通兄弟选择器选取所有指定元素的兄弟元素,使用”~”作为连接符。向下找不会向上找

属性选择器

选择器[att][att] 匹配所有具有att属性的元素。
选择器[att=val] 匹配所有att属性等于“val”的元素。
选择器[att~=val]选择具有att属性且属性值为包含val的字符串的元素(如果忽略了波浪号,则说明需要完成完全匹配)。
选择器[att|=val]选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。   

浮动:float可以使块状元素并列显示,给所有需要并列显示的元素(如图片和文本对齐时总有点错位)都添加浮动

子元素可以把父元素撑大,但当设置浮动时,不会把body撑大,元素设置浮动之后,会脱离正常文档流。

高度塌陷:如果父元素在没有设置高度时,高度为0,叫父元素的高度塌陷;

解决办法:,在设置浮动的元素下面设置

html day2 --CSS基础_第6张图片

  1. line-height:2   实际默认的单位为em,表示行高为字符的文本高度*number倍数
  2. line-height:100%,表示行高与当前字体大小一样,200%=fontsize*2
  3. line-height:34px;

html day2 --CSS基础_第7张图片

html day2 --CSS基础_第8张图片

这样量行高:给文本设置行高后,字体会默认垂直居中。

html day2 --CSS基础_第9张图片

文字水平居中text-align:center

经常对a标签设置,如a{text-decoration:none;}

html day2 --CSS基础_第10张图片

 

html day2 --CSS基础_第11张图片

正的值往右走,给负值往左走.文本中经常用到

html day2 --CSS基础_第12张图片

百分比是基于父元素的尺寸

html day2 --CSS基础_第13张图片

html day2 --CSS基础_第14张图片

html day2 --CSS基础_第15张图片

html day2 --CSS基础_第16张图片

若父元素有高度,则不会出现高度塌陷

html day2 --CSS基础_第17张图片

text-align/text-decoration/text-indent

html day2 --CSS基础_第18张图片

li和a都可写:hover,但范围不一样

 

 

你可能感兴趣的:(css)