CSS3基础

1 样式表的使用

1.内联样式表。

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

<p style="color: aqua;font-size: 20px">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 class="anyname">

<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

CSS3基础知识的更多相关文章

  1. CSS3 基础知识

    CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0 ...

  2. CSS3 基础知识[转载minsong的博客]

    CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0 ...

  3. css3基础知识——回顾

    1.属性选择器 完全匹配的属性选择器 [id=article]{} 示例: <style> input[type=text]{ border: 2px solid red;} </s ...

  4. CSS3基础知识学习

    CSS3动画例子展示 http://www.17sucai.com/pins/demoshow/13948 HTML5和CSS3特效展示 http://www.html5tricks.com/30-m ...

  5. 【前端】之CSS3基础知识

    CSS3 私有化前缀 考虑到CSS3的兼容性问题,某些属性需要添加浏览器的私有化前缀 几种主流浏览器的私有化前缀如下: Chrome.Safari:-webkit- Firefox:-moz- IE: ...

  6. CSS3基础知识核心动画（二）

    Transition过渡 transition-property 过渡属性 all|[attr] transition-duration 过渡时间 transition-delay 延迟时间 tran ...

  7. CSS3基础知识（一）

    结构选择器 :nth-child(n) 第几个元素 从1开始设置 :nth-child(2n) 偶数元素 从0开始设置 :nth-child(2n+1) 奇数元素 :nth-of-type(n) :f ...

  8. 《HTML5与CSS3基础教程(第8版)》

    <HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro    ...

  9. HTML5与CSS3基础教程(第8版) PDF扫描版​

    <HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...

随机推荐

  1. Ipad,IPhone（矩阵求递推项+欧拉定理）

    Ipad,IPhone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...

  2. zookeeper分布式搭建

    1下载并解压zookeeper安装包 2进入zookeeper配置文件目录,找到zoo_sample.cfg,执行cp zoo_sample.cfg  zoo.cfg 3打开zoo.cfg文件,修改d ...

  3. T-SQL 删除重复数据SQL

    WITH cte AS (   SELECT roleid,permissionid,      row_number() OVER(PARTITION BY roleid,permissionid ...

  4. 我在学JavaScript中的循环

    for (var num1 = 1;num1 < 10;num1++ ){ for (var num2 = 1;num2< 10;num2++ ){ console.log(num1+'* ...

  5. 我的第一个python web开发框架（16）——产品分类管理

    产品分类管理的html页面之前忘记做了,这次附件里补上. 好了先上图 从页面效果图来看,我们需要开发列表获取接口.添加接口.单条记录获取接口.编辑接口和删除接口 对于产品分类列表,我们将使用jqgri ...

  6. 微信分享 JSSDK的使用

    我现在做过的在微信中运行的项目,基本上都有微信分享功能,所以,会使用JSSDK分享页面是非常重要的.分享功能的代码一般会放在beforeCreate或mounted钩子中,代码如下: this.$ht ...

  7. [转载] Spark：大数据的“电光石火”

    转载自http://www.csdn.net/article/2013-07-08/2816149 Spark已正式申请加入Apache孵化器,从灵机一闪的实验室“电火花”成长为大数据技术平台中异军突 ...

  8. Redis+Tomcat+Nginx集群实现Session共享，Tomcat Session共享

    Redis+Tomcat+Nginx集群实现Session共享,Tomcat Session共享 ============================= 蕃薯耀 2017年11月27日 http: ...

  9. vuejs(2.0)基础笔记

    基本结构 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#wrap', data ...

  10. CentOS 7.2 配置mysql5.7

    准备篇:一.配置防火墙,开启80端口.3306端口CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙.1.关闭firewall:systemctl stop f ...