http://t.csdn.cn/EY5xE(入门学习1)
http://t.csdn.cn/zpRi9 (入门学习2)
http://t.csdn.cn/PNvdB(入门学习3)
前面学习文章的链接我给大家放在这里哦,大家可以巩固学习
今天我们开始一起学习css选择器的知识
一、css简介
我们知道网页分成三个部分
结构 20个左右标签,先用一段时间
表现 外在显示的样子 css
行为 JS
css 层叠样式表
网页实际上是一个多层的结构,通过css可以分别为网页的每一层来设置样式
而最终我们能看到的只有最上边的一层
设置网页中元素的样式
二、css书写位置(引入方式)
一共有三种引入方式,行内样式、内部样式和外部样式,下面为大家一一介绍
2-1 行内样式
行内样式又可称为内联样式
写在开始标签里面,写一个style属性,将一组一组的样式写在style属性值里面
color: red; 样式名:样式值;
可以写多组样式,但一定要用 ; 隔开
color 设置字体的颜色
background-color 设置背景色
font-size 设置字体的大小 默认的字体大小是16px
行内样式比较适合初学者学习的时候使用,在网站开发时尽量不要去用,因为使用这种样式会把结构和CSS全部融合在一个页面里面,造成代码冗余,后期调整样式的时候非常不方便。
2-2 内部样式表
写在head标签内部,写一个子元素,style标签,
通过选择器选中对应的要设置的元素/标签,在 {} 里设置一组一组样式
也可以写多组样式,也需要用 ; 隔开
内部样式比较适合案例或者比较小的页面中,因为它也会增加HTML文件的代码量,同时也不方便复用
2-3 外部样式表
在html文件的外部新建一个.css文件,在css文件里写样式
然后通过在head标签内部写子标签link标签,将html文件和css文件联系在一起
link标签里有href属性,在href里写引入css文件的路径
注意:这种方式推荐使用
三、css的语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(background-color)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
下面这行代码的作用是将 p元素内的文字颜色定义为红色,同时将字体大小设置为 50 像素。
在这个例子中,p 是选择器,color 和 font-size 是属性,red 和 50px 是值。
下面的示意图为您展示了上面这段代码的结构:
CSS 语法
提示:请使用花括号来包围声明。
值的不同写法和单位
除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:
1 |
|
为了节约字节,我们可以使用 CSS 的缩写形式:
1 |
|
我们还可以通过两种方法使用 RGB 值:
1 2 |
|
请注意,当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。
补充:CSS注释:CSS的注释,作用和HTML注释类似,只不过它必须编写在style标签中或者是css文件中
四、常用选择器
在学习几个常用选择器前,先补充一点小知识
块元素:
1、独占一行
2、宽度是父元素的100%
3、高度是被内容撑开的
行内元素
1、不会独占一行
2、宽高是内容撑开的,不可以设置宽高
4-1 元素选择器(标签选择器)
语法:标签名 {}
作用:选中对应标签包裹的内容
例子:h1{},h2{},p{},div{},span{}
4-2 id选择器
(id属性值不可以重复使用)
语法:#id属性值{}
作用:选中对应的id属性值的内容
例子:#p1{},#pp{},#abc{}
4-3 class选择器
(用法跟id选择器是一样的,只不过它可以复用)
语法:.class属性值{}
作用:选中对应class属性值的内容
例子:.pp{},.p1{}
4-4 通配选择器
语法:*{}
作用:选中页面中所有的标签
(PS:今天先学这么多,大家勤动手练习一下,试试这些选择器效果感受一下,增加印象)