从零开始的html教程之CSS篇(2):CSS中的选择器

一、css的基本构成

选择器{属性:属性值}

css的语句就是由以上三部分组成选择器写在花括号前,花括号内为声明,如果有多个声明,属性前会用“;”隔开。先列举个例子:

body

{

    background:#2CA4CF;

    font-family:"黑体";    

    color:#ffffff;

}

我们之前学过元素内嵌入style改变样式的用法,style跟花括号内声明的用法相同。当外部样式表或内部样式表时,就要以这样的形式书写。这段代码的意思是body元素的背景为#2CA4CF色,字体为黑体,字体颜色为#ffffff(黑色)。

二、css中的选择器

1.标签选择器

p{color:black;}

标签选择器是给特定标签确定样式的选择器,这个例子就是让所有p标签应用了黑色字体的样式。

2.类选择器

.class1{color:black;}

类选择器就是根据类名(class)来选择的,在类名前加一个“.”。

3.ID选择器

#id1{color:black;}

ID 选择器可以为标有特定ID的元素指定特定的样式。id在一个html文档页面中只能出现一次,例如,你将一个元素的id取值为”id1”,那么在同一页面你就不能再将其他元素id取名为“id1”了。尽管你会发现即使命名好几个id,css选择器还是会把这些id全都应用样式,就像标签选择器那样。请保持良好的习惯,id不要出现重复。

4.后代选择器

div.class1 p{color:red;}

后代选择器又叫包含选择器。外层的标签在前面,内层的标签在后面,之间要留一个空格,内层标签为嵌套在外层内的标签,该内层标签就是外层标签的后代。该句子会将class为class1的div内所有p标签应用字体颜色红色的样式。

5.子代选择器

div.class1>p{color:red;}

子代选择器用法跟后代选择器很像,标签之间用“>”大于号连接。区别是子代选择器只会选择div.class1的子元素中的

,不包括子元素的子元素等,,不会选择孙子和更晚的备份,故名子代选择器。

6.群组选择器

p,div,.class1,#id1{color:red;}

群组选择器选择许多个标签,之间用“,”小写的逗号隔开,选择器会选择写下来的所有的标签或类。

7.通用选择器

*{color:red;}

通用选择将样式适用去整个html文档,是最强大的选择器。语法是在花括号前写一个“*”星号。

 

这篇课程讲解了css中基本的语法结构和最基础的选择器功能。学过html的同学一定已经能看懂很多css代码了!

时间: 2024-10-26 07:41:26

从零开始的html教程之CSS篇(2):CSS中的选择器的相关文章

从零开始的html教程之CSS篇(1):轻松入门CSS

大家通过学习html已经可以做出简单的网页了,但是想要做出复杂的网页就不能局限于html这一门语言了.通过学习CSS可以极大提高效率.做出精美的网页. 一.样式表是什么? 层叠样式表(英语:Cascading Style Sheets,简写 CSS),是一种用来格式化文档.添加样式的计算机语言. 样式表分为: 1.外部样式表 在head元素中添加<link>标签链接到css样式表<link rel="stylesheet" type="text/css&qu

从零开始的html教程之CSS篇(3):常用的字体与文本属性

一.css常用的字体属性 1.字体的设置 在CSS中字体通过font-family属性来设置. font-family:"黑体"; 2.字体的大小 用font-size设定文字的大小 font-size: 16px; px是长度单位,1px的意思是1个像素的大小用color设定文字颜色 3.字体的颜色 color: black; color: #FFFFFF; color: rgb(255,255,000); color: rgb(0%,100%,100%); 颜色可以用英文单词.十六

Boostrap基础教程之JavaScript插件篇_javascript技巧

Boostrap提供了12种JavaScript插件,包括: 动画过渡 Transition 模态 Modal 下拉菜单 Dropdown 滚动侦测 Scrollspy 选项卡 Tab 提示框 Tooltip 弹出框 Popover 警告框 Alert 按钮 Button 折叠 Collapse 旋转轮播 Carousel 自动定位浮标 Affix 模态弹窗 <div class="modal show"> <div class="modal-dialog&

CSS教程之CSS的应用_基础教程

  一.In-line 行内  行内样式是在html标签里直接使用style属性     <p style="color: red">text</p>  设定段落文字红色.  但要记住,最后的HTML应该是独立出来,使用表现文档,所以行内样式应该在任何地方避免.  二.Internal 内部  使用于整个页面的植入内部样式在head标签里面,style标签包围样式.     <!DOCTYPE html PUBLIC "-//W3C//DTD X

Dreamweaver MX 2004 CSS使用教程之CSS类型属性

css|dreamweaver|教程 本站原创内容,转载请注明出处网页教学网. 二.定义CSS的类型属性 使用"CSS 样式定义"对话框中的"类型"类别可以定义 CSS 样式的基本字体和类型设置. 定义 CSS 样式的类型设置: 在"CSS 样式定义"对话框中,选择"类型"(如下图),然后设置所需的样式属性. 以下属性如果不设置可以保留为空. 字体:为样式设置字体.DW MX 2004内置6个系列的英文字体(如下图). 一般英

Dreamweaver MX 2004 CSS使用教程之CSS扩展属性

css|dreamweaver|教程 本站原创内容,转载请注明出处网页教学网. 九.定义 CSS 样式扩展属性 "扩展"样式属性包括过滤器.分页和光标选项,它们中的大部分效果仅受 Internet Explorer 4.0 和更高版本的支持. 指定扩展属性:在"CSS 样式定义"对话框中,选择"扩展"(如下图),然后设置所需的样式属性. 分页:在打印期间在样式所控制的对象之前或者之后强行分页.选择要在弹出式菜单中设置的选项.此选项不受任何 4.0

Dreamweaver MX 2004 CSS使用教程之CSS列表属性

css|dreamweaver|教程 本站原创内容,转载请注明出处网页教学网. 七.定义 CSS 样式列表属性 "CSS 样式定义"对话框的"列表"类别为列表标签定义列表设置(如项目符号大小和类型). 定义列表样式:在"CSS 样式定义"对话框中,选择"列表"(如下图),然后选择所需的样式属性. 如果不设置属性可以保持为空. 类型:设置项目符号或编号的外观.两种浏览器都支持"类型". 项目符号图像:可以为项

Dreamweaver MX 2004 CSS使用教程之CSS方框属性

css|dreamweaver|教程 本站原创内容,转载请注明出处网页教学网. 五.定义 CSS 样式方框属性 使用"CSS 样式定义"对话框的方框(又称盒子)类别可以为控制元素在页面上的放置方式的标签和属性定义设置.可以在应用填充和边距设置时将设置应用于元素的各个边,也可以使用"全部相同"设置将相同的设置应用于元素的所有边. 定义元素在页面上的放置方式:在"CSS 样式定义"对话框中,选择"方框"(如下图),然后设置所需的样

Dreamweaver MX 2004 CSS使用教程之CSS区块属性

css|dreamweaver|教程 本站原创内容,转载请注明出处网页教学网. 四.定义 CSS 样式区块属性 使用"CSS 样式定义"对话框的"区块"类别可以定义标签和属性的间距和对齐设置. 定义区块设置:在"CSS样式定义"对话框中,选择"区块"(如下图),然后设置所需的样式属性. 如果不设置属性可以保持为空. 单词间距:设置单词的间距.若要设置特定的值,请在弹出式菜单中选择"值",然后输入一个数值.在