您现在的位置是:首页 > 前端学习 > Web前端Web前端

CSS规则(第十二章)(图文)

第十三双眼睛2020-02-26【Web前端】人已围观

简介对于设计者来说,总式希望能够在页面中自由发挥创意,实现自己得想法,然而,HTML语言中的很多标签都存在很大的局限性,如h1这样的标签,始终是定义较大的字体,所以,在没有CSS之前,设计者不得不借助其他标签补充标签的属性。
从本章开始,读者要尽量忘记原来标签的定式,CSS样式如同一种上乘的武学,类似于一种无招胜有招的境界,比如,虽然h1常用来定义标题,但这是因为人们习惯于这样使用,而h1表现出来的样式并非一成不变的,当设计者使用CSS时,他们可以令h1标签内的文本变成自己想要的样子。

如何学习CSS
css常被翻译成层叠样式表,一个CSS看上去是这样写的:
<style type="text/css">
            body{
                font-family: "微软雅黑";
                font-size: 20px;
                color: black;
                background-color: blue;
                margin: 1em;
                padding: 0;
            }
</style>
大括号种是一排属性值的描述,CSS并不神秘,只是页面中使用属性标签来修饰页面内容的表现,而CSS的作用正是用来修饰页面内容的表现形式,所以CSS本身就是一个属性集,只不过这个属性可以由设计者自己定义,可以无限扩展。
例子:CSS的使用
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS的使用</title>
        <style type="text/css">
            #header ul{
                list-style-type: none;
                padding: 0;
                margin: 0;
            }
            #header li{
                display: inline;
                border: solid;
                border-width: 1px 1px 0 1px;
                margin: 0 0.5em 0 0;
            }
            #header li a{
                padding: 0 1em;
            }
            #content{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>导航栏</h1>
            <ul>
                <li><a href="#">目录1</a></li>
                <li><a href="#">目录1</a></li>
                <li><a href="#">目录1</a></li>
                <li><a href="#">目录1</a></li>
                <li><a href="#">目录1</a></li>
            </ul>
        </div>
        <div id="content">
            <p>使用CSS修饰导航栏</p>
        </div>
    </body>
</html>


具体效果如下图所示

基本的样式表写法
CSS样式表也有属于自己的写法规则,在特定的规则下编写,才可以使其生效,一个标准的CSS写法是这样的,比如:
h1{
                font-family: "微软雅黑";
}
h1表示选择符,font-family表示定义字体
微软雅黑是属性值,这里表示定义的字体为黑体字。而font-family: "微软雅黑";将属性和属性值结合在一起,这样的形式称之为声明语句。声明语句可以有很多,都要放在{}内。
使用类class和标志id链接样式表
一个定义和好的样式表,需要通过类和标志id来定位它所作用的页面内容,id标志在同页面种可以实现链接,作用相当于在页面种定位一个锚点,id在链接CSS属性表时,所起到的作用是一样的,而类似这样作用的还有类class,类class和标志id之间是由区别的。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>类选择器和ID选择器</title>
        <style type="text/css">
            .style1{
                color: red;
                font-size: 18px;
            }
            #style2{
                color: blue;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <h3 class="style1">使用类选择器的红色字体</h3>
        <h3 class="style2">使用类选择器的红色字体</h3>
        <h2 id="style1">使用ID选择器的蓝色字体</h2>
        <h2 id="style2">使用ID选择器的蓝色字体</h2>
    </body>
</html>
创建选择器
选择器指定了样式将被应用于页面种的哪些内容,主要有3种基本选择器,HTML选择器,ID选择器,和class选择器。通过这些基本的选择器,HTML还有很多派生选择器,而多种基本选择器混合使用时则定义为分组选择器,此外,还有一种特殊的伪类选择器。
1HTML选择器
所谓HTML选择器,其实就是重新定义HTML表现性标签的样式,正如文中所提出的,<h1>标签内的文本应该时黑色的大体字,而当通过重新定义后,<h1>标签内可以是任何样式。
例子:HTML选择器的使用
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML选择器的使用</title>
        <style type="text/css">
            h1{
                color: #555555;
                font-size: 2.3em;
                font-family: "微软雅黑";
            }
        </style>
    </head>
    <body>
        <h1>HTML选择器的使用</h1>
    </body>
</html>


实际效果如下图所示:

2派生选择器
通过依据元素在其位置的上下文关系来定义样式,称之为派生选择器,设计者可以使标记更加简洁,这种方式更好的体现了,CSS的级联特性,如下面这个例子,
派生选择器例子:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>派生选择器</title>
        <style type="text/css">
            h1 h2{
                color: red;
                font-size: 1em;
                font-family: "微软雅黑";
            }
        </style>
    </head>
    <body>
        <h1>HTML选择器的使用</h1>
        <h2>HTML选择器的使用</h2>
        <h1> <h2>HTML选择器的使用</h2></h1>
    </body>
</html>


具体效果如下图所示:

id选择器
ID选择器的作用就是通过ID选择器将CSS样式表作用到页面的对象上,那么这个样式表应该这样写,在选择器的开头写上一个#,如:
#content{
                font-size: 18px;
 }
将这个样式表绑定到HTML对象上时,要定义标签的id为context。
class选择器
如果希望通过class选择器将样式表固定到HTML页面对象时,那么样式表的写法应该是在选择器开头处加上.符号,如:
.play{
                font-size: 20px;
}
这样,将这个样式绑定到HTML对象上时,要使用class选择器
5分组选择器
如果出现多个选择器定义的内容都是一样的时候,例如
h1{
        font-size: 20px;
}
#content{
       font-size: 20px;
}
.play{
      font-size: 20px;
}
伪类选择器
伪类选择器并不是很多,通常他们都是用来定义一些特殊的效果,他们的写法由一个冒号:和一个带有符加条件的属性组成,如超链接就是一个典型的伪类选择器,,还有伪类选择器:lang,它的作用是允许设计者为不同的语言定义特殊的规则。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪类选择器</title>
        <style type="text/css">
            a:hover{
                color: red;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <a>点击一下</a>
    </body>
</html>
CSS中还有一些其他的伪类选择器
:active    将样式添加到被激活的元素中
:focus     将样式添加到被选中的元素中
:hover     将鼠标悬浮在页面对象上方时,向页面对象添加样式
:link        将样式添加到未被访问过的链接中
:visited   将样式添加到访问过的链接中
:first-child   将样式添加到页面对象的第一个子元素中
:lang       允许设计者定义指定的页面中所使用的语言

应用CSS样式表
应用CSS的方式有四种,分别为嵌入式样式表,内联样式表,外联样式表,多重样式表。
1嵌入样式表
是指使用<style>标签将样式表放入到<head>内,这种用法的好处是,将页面的表现性和结构性实现很好的分离,对于设计者来说,使共同的协作效率更高,写法是
<style type="text/css">
            h1{
                font-size: 20px;
            }
</style>
<style>标签内部是type属性,当然,也有一些其他属性可以使用,如media属性,可以用来定义何种媒介来提交文档,文档可以被显示在显示器,纸媒介或者浏览器,代码如下:
<style type="text/css" media="screen">
            h1{
                font-size: 20px;
            }
</style>
2内联样式表
同时也成为行内CSS,通过style属性来引用声明语句,放在页面结构性标签的后面,例如,
<p style="color: red;">hello world</p>
页面在设计时,尽量少用内联样式表,因为这种方法不能将页面表现和页面结构很好的分开,通常是在不得已的情况下,用作补充调整的作用
3外联样式表
在创建整站的工程时,通常,一个CSS样式表需要同时用于以下几个页面。这时候使用外联样式表是最好的选择,因为使用CSS样式表可以作为一个独立文件存在页面外部,后缀名称为css.通常的情况是使用<link>标签引入样式表,写法是:
<link rel="stylesheet" type="text/css" href="index.css"/>
或者是
<style type="text/css" media="screen">
            @import url("global.css");
</style>

多重样式表
在样式表种,如果出现多种样式表,他们之前总得有个先后得问题,通常来说,当多个样式表作用于同一页面得一个对象时,离这个页面对象最近得样式表起决定性作用,但是,行内样式表始终处于最高级别,例子:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>多重样式表下的优先级</title>
        <link rel="stylesheet" type="text/css" href="css/bobo.css"/>
        <style type="text/css">
            .hui{
                color: red;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="bobo">
            <p class="hui">多重样式表下的优先级</p>
        </div>
        
        <dvi class="hui">
            <p class="bobo">多重样式表下的优先级</p>
        </dvi>
        
        <div class="hui">
            <p style="color: red;" class="hui">多重样式表下的优先级</p>
        </div>
    </body>
</html>
.bobo{
    color: blue;
    font-size: 16px;
}


效果如下图所示:

修饰页面文本字体
不要忽视字体的作用,字体的设置能够潜移默化的给浏览用户带来很大的视觉影响,CSS中,使用font-family属性来定义字体的样式,说到字体,中国文化中的字体博大精深,至少可以定义上百种,但是,浏览器只支持系统中的字体,如果设计者希望使用字定义的字体,则需要将字体存入电脑,
例子:CSS修饰字体的方法
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>修饰文本字体</title>
        <style type="text/css">
            h1{
                font-family: "微软雅黑";
            }
            p{
                font-family: "隶书";
                font-size: 22px;
            }
        </style>
    </head>
    <body>
        <h1>中国经济发展形式</h1>
        <p>从宏观上说,中国经济发展整体形式好。。。。。。。</p>
    </body>
</html>


效果如下图所示:

如果不确定浏览器支持的字体,可以在指定字体的后面添加备选字体,例如:
font-family: "微软雅黑","宋体";

文本的字号 
font-size属性用来改变字体的大小,在规定字体大小的时候,最常见的有3中表示方法,也可以说是3种设置方案,分别是px,em,%
像素单位px,使用像素直接定义字体的大小,绝对单位,如12px,无论在哪个显示器种,字体的大小只会相对于显示设备来确定
em:这是目前比较流行的一种字体大小定义方式,一个字体的大小就是1em,任何浏览器的默认字体大小都是1em,用户可以根据自己的喜好定义默认字体,如网页中的字体大小就可以弹性的改变。
百分比:这是以当前文本的百分比定义尺寸,例如:{font-size:200%},是指定文本大小为原来的2倍,在页面制作中,通常使用%定义页面主体的初始字体大小,然后以em单位表示字体的大小。
文本段落行高
使用line-height进行行高的设定,同样,段落行高的数值也可以通过单位px,单位em,和百分比来设置,1em和100%代表正常的行距,所以用em单位和%表示行距也是比较好的选择。
禁止文本自动换行
大部分互联网上的页面,都是禁止页面内容自动换行,这似乎已经成为了一种默认的许可,如果页面随着浏览器的大小自动切换,确实令人眼花缭乱,通过white-space属性可以禁止文本自动换行.

给页面对象添加颜色
对于页面颜色,CSS要做的工作就是通过不同的属性作用于不同的HTML对象,将颜色值赋予这些对象就可以了,页面主要有color和background-color这两个重要的颜色,准确的说,color修改对象前景色,background-color修改器对象的背景色.

修饰页面文本和页面背景的属性
background  作用是将背景属性设置在一个声明中
background-color  设置页面对象的背景色
background-image  引用图像设置背景
background-repeat  背景图像重复的方式
background-position   设置背景图像的具体位置
background-acctachment    设置背景图像是否页面的其余部分而滚动
color    设置文本颜色
line-height   设置行高
white-space  设置元素段落排版格式
word-spacing  设置字间距
font-family    设置文字字体
font-size    设置字体大小
font-style   设置字体风格
font-weight   设置字体粗细
direction   设置文本方向
letter-spacing  设置字符间距
text-align   对齐页面中的文本
text-decoration   向文本添加下划线
text-transform  控制元素中的字母

模块化的发展
CSS3开始遵循模块化的发展,以前的规范作为一个模块实在是庞大而繁杂,所以CSS3把它分成许多小的模块,这样,有助于理清各个模块的关系。
CSS3的模块化规范,显得非常灵活,一个CSS规范如果要完整的获得浏览器的支持,是非常困难的,但是浏览器选择完整支持某个模块的规范是比较容易实现的,反过来,如果衡量以个浏览器对CSS3的支持程度,可以各个模块分别衡量。
CSS3的模块化有利于未来的发展,CSS需要增加新的规范时,非常不希望其他规范也跟着变动,模块化的发展,使得每个独立的模块都能根据需要进行独立更新,当增加新的特性或者模块时,不会影响已经存在的特性。

浏览器的支持情况
尽管CSS3的很多新特性很受开发者的欢迎,但并不是所有的浏览器都支持它,各个主流浏览器都定义了各自的私有属性,以便能够让用户体验CSS3的新特性。
私有属性的出现,固然可以避免不同浏览器解析同一个属性时出现冲突,但是也给设计师们带来诸多不便,需要编写更多的CSS代码,而且也没有解决同一页面在不同浏览器中表现不一致的问题。
尽管私有属性有很多弊端,但是也为设计师们提供了较大的选择空间,至少在CSS3规范发布以前,能表现一些特定的CSS3的效果。

CSS3新特性
与之前的版本相比,CSS3的改进是非常大的,CSS3不仅是在修订和完善,更是增加了很多的特性,把样式表的功能发挥的淋漓尽致,之前的很多效果借助图片和脚本来实现,现在只需几行代码就能搞定了。CSS3的新特性如下:
1功能强大的选择器
CSS3增加了更多的CSS选择器,如在属性选择器中引入通配符,灵活的伪类选择符nth-child()等
2文字效果
在CSS3中,可以给文字增加阴影,描边和发光效果,还可以自定义特殊的字体,如艺术字体等网络上不常用的字体。
3边框
在CSS3中,可以直接给边框设计圆角,阴影,边框背景等,其中边框背景会自动把背景图切割显示。
4背景
背景图片的设计更加灵活,不但可以改变背景图片的大小,裁剪背景图片,还可以设置更多的属性
5色彩模式
CSS3的色彩模式,除了支持RGB色彩之外,还支持HSL(色调,饱和度,亮度),并且针对这两种色彩模式,又增加了可以控制透明度的色彩模式。
6盒布局和多列布局
在布局方面,CSS3新增了两种布局方式,灵活的盒布局和多列布局,这两种布局,可以弥补现有布局的不足,为页面布局提供了更多的手段,并大幅度缩减了代码。
7渐变
CSS3已经支持渐变的设计,这样,不但告别切图的时代,而且设计也更加灵活,后期的维护也更加方便。
8动画
有了CSS3的动画,设计师们可以不用编写脚本,直接就可以让页面元素动起来,并且不会影响整体布局。
9媒体查询
CSS提供了丰富的媒体查询功能,可以根据不同的设备,不同的屏幕尺寸来自动调整页面的布局。

CSS3增强的选择器功能
属性选择符
CSS3新增了3种属性选择符,E[attr^="val"],E[attr$="val"],E[attr*="val"].这些选择符遵循了管用的编码原则,选用了^,$,*这三个通用的匹配运算符,具有以下意义:
1^匹配起始字符
2$匹配结束字符
3*匹配任意字符
属性选择符E[attr^="val"],该选择符具有attr属性并且属性值为一用空格分隔的字词列表,其中一个等于val的元素
例子:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择符</title>
        <style type="text/css">
            ul{
                margin: 0;
                padding: 10px 10px 10px 30px;
            }
            li{
                margin: 1px;
                font-family: "courier new";
                font-weight: bold;
            }
            li[lang^="a"]{
                background-color: #f60;
            }
        </style>
    </head>
    <body>
        <ul>
            <li lang="af">aaaa</li>
            <li lang="ar">bbbb</li>
            <li lang="be">cccc</li>
            <li lang="bg">dddd</li>
            <li lang="br">eeee</li>
        </ul>
    </body>
</html>


具体效果如下图所示:

属性选择符E[attr$="val"]
表示属性的值的最后字符为val
属性选择符e[attr*=val]
表示属性值种包含val部分

结构伪类选择符
CSS3种新增的结构伪类选择符,可以通过文档结构的相互关系来匹配特定的元素,对于又规律的文档结构,可以减少class顺序和id属性的定义,使得文档更加简洁。
1选择符root,not,empty,target
选择符E:root,选择匹配E所在文档的根元素。所谓的根元素就是位于文档结构种最顶层的元素,在HTML种,根元素就是html元素,此时该选择符与html选择符匹配的内容相同
选择符E:not(s),选择匹配所有不匹配简单选择符s的E元素
选择符E:empty,选择匹配E的元素,并且该元素不包括子节点,文本也属于节点
选择符E:target 选择匹配当前连接地址指向的E元素。
2选择符first-child,last-child,nth-child,nth-last-child
利用这几选择符,可以指定一个父元素种的第一个子元素,最后一个子元素,指定序号的子元素,第偶数个子元素,和第奇数个子元素。
选择符E:nth-child(n),匹配父元素中第n个位置的子元素,其中n可以是一个数字,关键字,(old,even),公式(2N+1),
选择符E:nth-last-child(n):匹配父元素中倒数第N个位置的子元素,与选择符E:nth-child(n)的计算顺序相反。语法和用法相同。

3选择符nth-of-type 和 nth-last-of-type
选择符E:nth-of-type(n):匹配父元素中第N个子元素,参数n的使用与E:nth-child(n)相同,不同的是,在匹配父元素的子元素时,首先把匹配E的子元素筛选出来单独排列,非E的子元素不参加排列。
选择符D:nth-last-of-type匹配父元素中倒数第n个子元素
4选择only-child,first-of-type,last-of-type和only-of-type
选择符E:first-of-type匹配父元素中第一个子元素E。
选择符E:last-of-type匹配父元素中最后一个子元素E。
选择符E:only-child匹配父元素中唯一子元素E,父元素中只能由唯一子元素才能匹配成功。
选择符E:only-of-type:匹配父元素中只包含一个子元素E,父元素可以有多个子元素,但子元素E只能有一个才能匹配成功.

UI元素状态伪类选择符
在CSS3中,还有一种伪类选择符,叫UI元素状态伪类选择符,可以设置元素处在某种状态下的样式,在人机交互的过程中,只要元素的状态发生了变化,选择符就有可能会匹配成功
选择符E:checked:匹配所有用户界面上处于选中状态的元素
选择符E:enabled:匹配所有用户界面上处于可用状态的元素
选择符E:disabled:匹配所有用户界面上处于禁用状态的元素
伪元素选择符
在CSS3中,还有一种伪元素选择符,是指针对并不是真正的元素使用的选择符,二十针对CSS已经定义好的伪元素使用选择符。
E::first-letter设置对象内的第一个字符的样式
E::   first-line设置对象内的第一行的样式
E::   before设置在对象发生的内容,和context属性一起使用
E::   after设置在对象后发生的内容,和context属性一起使用
E::  selection 设置对象被选择时的颜色
伪元素选择符的使用发发如下:
选择符::伪元素{属性:值}
例子:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪元素的使用</title>
        <style type="text/css">
            p:first-letter{
                font-size: 24px;
                font-weight: bold;
            }
            a[href$=doc]::before{
                content:url(img/doc.png);
            }
            a[href$=pdf]::before{
                content: url(img/pdf.png);
            }
        </style>
    </head>
    <body>
        <p>
            以下是参考资料:<br />
            <a href="img/test.doc">参考资料1</a>
            <br />
            <a href="img/test.pdf">参考资料2</a>
        </p>
        
    </body>
</html>


效果如下图所示:




 

Tags:HTML   网页   CSS

很赞哦! ()

随机图文

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计64篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们