你的位置:首页 > 网页设计

[网页设计]CSS3基础知识

CSS3基础

1 样式表的使用

1.内联样式表。

只影响单个元素,常用于标签。

<p >This is CSS.</p>

 

2.内部样式表。

对本页面元素起作用,一般写在<head></head>中,用<style></style>定义。

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

       body{

              font-family: "宋体";

       }

       </style>

</head>

 

3.连接外部样式表。

建立一个外部CSS文件用link元素引入到HTML中。

<link rel="stylesheet" type="text/css" href="CSS/realtest.css">

 

 

总结:

CSS内联:就是把CSS放在HTML Head里使用Style包围。<style type="text/css"></style>

CSS外联:就是把CSS放到一个单独的文件里,然后在HTML通过调用。<link rel="stylesheet" type="text/css" href="">。

我们知道HTTP请求是比较昂贵的,CSS内联的话肯定会更快,因为把CSS放到HTML文件里,这意味着减少了一次HTTP请求。而外联的话就是 一次HTTP请求,但是可以缓存,当浏览器加载过这个文件时,第二次请求的时候是第缓存里读取的,所以第二次请求时是很快的,外联的CSS还可以重用代 码。那到底是使用内联还是外联呢?这就要看需求,如果一个页面不需要缓存时,也就是这个页面不太访问,或者访问不多的时候,比如注册页面,一般情况下人家 只会进入一次,不可能第次进入这个网站你都去注册,那就另当别论了,这个页面不需要缓存,把CSS放在Head里时可以缩短加载时间,提高用户体验。对于 经常访问的页面,外联肯定是不二的选择。

在一些大的网站,如:Google,Yahoo也可以看到把CSS写在Head里。对于结构表现行为分离的原则,我们对于CSS入在Head里是可以接受的,只要不是写在元素上面。

Copyright@Kingwell Leng

 

2 定义选择器

选择器分两个种类,第一种为DOM选择器,包含类型选择器、类选择器和选择元素一部分和ID选择器,第二种包含伪选择器。

 

1.按照类型选择元素。

       以标签为单位来设置相同的显示样式,不需要定义前缀符。

<style>

       p{

              font-family: "宋体";color: red;

       }

       a{color: #ADADAD;}

       </style>

 

2.按照类型选择标签。

       以标签样式类型选择为选择条件,类型为class,“.”为前缀,可以对多个标签应用样式,也可以派生样式。

<head>

<style type=”text/css”>

       .anyname{

              font-family: "宋体";

              color: #ADADAD;

              width: 100px;

              height: auto;

              border: 1px solid blue;

       }

       </style>

</head>

<body>

       <p>This is CSS.</p>

       <div >

              <p>This is CSS!</p>

       </div>

</body>

 

3.按照ID选择元素

       类似与类型选择器,以“#”为前缀,在标签中加入id属性引用样式。

<head>

<style type="text/css">

       #box{

              font-family: "宋体";

              color: #ADADAD;

              width: 100px;

              height: auto;

              border: 1px solid blue;

       }

       </style>

</head>

<body>

       <p>This is CSS.</p>

       <div id="box">

              <p>This is CSS!</p>

       </div>

</body>

 

4.选择元素的一部分

       单独选择元素从而不影响其他元素,有子元素选择器和多重元素选择器。

1)子元素选择器

h1>strong{color:red;}

或者:h1 strong{color:red;}

注:只对第一层有效

2)多重元素选择器

       优点在于避免过多的id、class属性设置,直接对所需元素进行定义。

#anyname p li a{float:right;  color:#ADADAD;}

3)选择部分元素

       实现多个元素或标签设置为同一样式。

<style type="text/css">

html {color:black;}

p {color:blue;}

h2 {color:silver;}

</style>

      

5. 伪类选择器

       CSS中已经定义好的选择器,不可以重命名。

1)<a>标签中的集中选择器

      

       a:link表示未访问的链接

a:visited表示已访问的链接

a:hover表示鼠标悬停的链接

a:active表示选定的链接(被按下时)

注:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

如:a:link{color:#ADADAD;text-decoration:none;}/*none表示将默认下划线去掉*/

 

2)CSS中四个伪元素选择器

       First-line       对所选标签元素的第一行应用样式   p:first-line{color:red;}

       First-letter     对所选标签元素的文字首字母应用样式   p:first-letter{color:bule;}

       Before           在某个元素前插入一些内容      li:before{content:”^^^”;}

After              在某个元素后插入一些内容      li:after{content:”(仅用于测试)”;}

 

3 文本与排版样式的使用

1. 长度、百分单位

       像素(px)与百分比是常用的长度单位。

在没有CSS规则限制下,长度关系:1em(相对单位)==16px(像素)==0.17in(英寸)==12pt(点)==1pc(派卡)==4.2mm(毫米)==0.42cm(厘米)

 

2. 文本样式属性

1) text-shadow 文字阴影。

       div {

              text-shadow: 10px 10px 10px orange,/*x偏移量,y偏移量,模糊半径,颜色*/

                                   40px 40px 40px yellow,

                                   20px 20px 23px #ADADAD;/*设置多个文字阴影*/

              font-size: 50px;

              font-weight: bold;/*{normal|bold|bolder|lighter|inherit}*/

              font-family: "宋体";

              color: navy;

       }

 

2) word-wrap 文本的控制换行。用于指定区域如div显示不完一行文字的时候为了不超出区域范围而使用的强制换行。

       Word-wrap; normal  | break-word

       *normal 只能在两个单词之间折断,break-word允许词内换行

 

3) webfont与font-face CSS3中webfont功能使网页上能显示服务器端的字体。

       使用方法:直接在<style></style>中插入以下代码

@font-face{

              font-famliy:WebFont;

              src: url('Font_Sans_R_45b.otf')format("opentype");/*应用服务器端字体*/

              font-weight: normal;

       }

 

4) font-size-adjust 可以保持字体在大小部发生变化的情况下改变字体的类型。

font-size-adjust: 0.46;

 

5) text-ouline与text-stroke 轮廓控制属性。

Text-outline: 2px 4px red;   /*宽度,模糊半径,颜色*/

      

       Text-stroke   描边控制

-webkit-text-stroke:3px #ADADAD;         /*宽度,颜色*/

 

 

4 背景和颜色的使用

1. 背景颜色

       网页背景颜色设置:Background-color: transparent | color /*透明或者设置颜色*/

       HSLA:/*色调(0-360,0&360==red,120==green,240==bule),饱和度(100%),亮度(100%),透明度(0~1)*/

              div.a{background:hsla(120,35%,50%,0.2);height: 20px;}

 

2. 背景图片

       格式如下:

              Body{background-img:url(../picture.jpg);}

关于background还有一些属性如-cilp、origin、size等控制背景图片位置等属性

 

5 盒子概念与使用

1. 元素外边界。

       外边界定义了矩形对象与其他矩形对象的距离,即模块与模块之间的空隙。

margin-bottom: 10px;/*下边界*/

              margin-left: 20px;/*左边界*/

padding: 40px 30px 20px 60px;/*上下左右边界*/

              margin: 0 auto;/*auto居中*/

2. 元素边框

       可以定义边框粗细。

border: 50px #ADADAD;/*定义粗细,颜色*/

              border-style: solid dotted double dashed;/*上下左右边框单独设置样式*/

border-style属性:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

 

3. 元素内边界

       内容与边框的空隙,与外边界属性类似。

              padding: 40px;

设置一个的时候表示上下左右距离一样,也可以用分别设置上下左右边界距离。

              padding: 40px 30px 20px 60px;

 

4. 内容的宽度、高度设置

       在设置边框的时候可以一同定义内容的宽高度。

div.a{

              background:hsla(120,35%,50%,0.2);height: 20px;width:200px;

              margin-bottom: 10px;/*外边界定义*/

              margin-left: 20px;

              margin: 0 auto;

              padding: 40px 30px 20px 60px;/*内边界定义*/

              height: 100px;/*宽高度定义*/

              width: 100px;

              border: 50px #ADADAD;/*边框定义*/

              border-style: solid dotted double dashed;

       }

 

 

5. 列表样式

常见的列表属性值

       list-style-type /*设定引导列表的符号类型*/

       list-style-image /*选择图像作为项目的引导符号*/

       list-style-position /*决定列表项目缩进*/

       常见的列表符号属性

              Circle                   设定类型

              Square                 图像

              Decimal                阿拉伯数字

              Lower-roman       小写罗马数字

              Wpper-roman      大写罗马数字

              Lower-alpha         小写字母

              Wpper-alpha       大写字母

              None                    不现实项目符号

              Disc                      实心圆

       在style中使用列表样式

              List-style-type:decimal;

 

 

注:

//-ms代表ie内核识别码
//-moz代表火狐内核识别码
//-webkit代表谷歌内核识别码
//-o代表欧朋【opera】内核识别码
//统标识语句句写符合w3c标准

 2017-11-15