首页 > 网站建设 >

网站制作之什么是CSS语言之“CSS选择器”(四)

发布时间:2018-09-01 作者:深圳网站制作

 网站制作公司博纳网络接上篇文章《网站制作之什么是CSS语言之“css属性”(三)》继续分享网站制作前端经验:css选择器。
网站制作知识之CSS选择器
CSS选择器是一种匹配模式,用于匹配需要应用样式的元素,类似于Photoshop中各种选取工具或命令,灵活使用CSS选择器是精确定义网页样式的基础。CSS选择器是个强大的工具,它允许用户在标签中匹配特定的HTML元素而不必使用多余的class、ID或JavaScript。如果用户希望设计一个干净的、轻量级的标签以及结构与表现更好的分离,高级选择器是非常有用的。它可以减少在标签中的class和ID的数量并让设计师更方便地维护样式表。CSS1、CSS2和CSS3提供了非常丰富的选择器,下面分类进行列表说明,以方便您快速参考。
1.基本选择器(如表所示)表1.2 基本选择器
2.组合选择器(如表1.3所示)表1.3 组合选择器
3.CSS2.1属性选择器(如表1.4所示)表1.4 CSS2.1属性选择器提示:
CSS2.1属性选择器支持使用多个选择器,设计同时满足这多个选择器,如blockquote[class=quote][cite]{color:#f00;}。
4.CSS2.1伪类选择器(如表1.5所示)表
1.5 CSS2.1伪类选择器5.CSS2.1伪元素选择器(如表1.6所示)表1.6 CSS2.1伪元素选择器
6.CSS3同级元素通用选择器(如表1.7所示)表1.7 CSS3同级元素通用选择器
7.CSS3属性选择器(如表1.8所示)表1.8 CSS3属性选择器8.CSS3用户界面伪类选择器(如表1.9所示)表1.9 CSS3用户界面伪类选择器
9.CSS3结构性伪类选择器(如表1.10所示)表1.10 CSS3结构性伪类选择器
10.CSS3反选伪类选择器(如表1.11所示)表1.11 CSS3反选伪类选择器
11.CSS3的:target伪类选择器(如表1.12所示)表1.12 CSS3的:target伪类选择器
【示例1】启动Dreamweaver,新建文档,保存为test.html。切换到代码视图下,在<head>标签中输入<styletype="text/css">标签,定义一个内部样式表。在内部样式表中输入下面CSS代码,定义一个标签样式,声明p元素的基本样式,该样式将应用于网页中所有段落文本,它将段落内的字体大小定义为12像素,字体颜色为红色。
【示例2】新建文档,保存为test1.html。切换到代码视图下,在<body>标签中输入下面HTML代码,输入3行文本。
<divclass="font18px">问君能有几多愁,恰似一江春水向东流。</div><pclass="font18px">剪不断,理还乱,是离愁。别是一般滋味在心头</p>
<p>独自莫凭栏,无限江山,别时容易见时难。流水落花春去也,天上人间。</p>在<head>标签中输入<styletype="text/css">标签,定义一个内部样式表。在内部样式表中输入下面CSS代码,定义3个样式:
第1个样式声明所有段落文本的字体大小为12像素,在第2个样式中定义一个font18px类,声明字体大小为18像素,在第3个样式中声明font18px类在段落文本中显示为24像素。保存文档,按F12键,在浏览器中预览,则显示效果如图1.12所示。图1.12 指定类选择器的应用效果
【示例3】新建文档,保存为test2.html。输入下面代码,定义了一个盒子,为该盒子固定宽和高,并设置背景图像,以及边框和内边距大小,显示效果如图1.13所示。网站制作之什么是CSS语言之“CSS选择器”全文未完,喜欢本站关于网站制作基本知识方面文章的您,敬请持续关注本站后续网站制作语言css文章。博纳网络编辑整理。
文章标题:网站制作之什么是CSS语言之“CSS选择器”(四)
本文地址:https://www.198bona.com/news/1300.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯