CSS3基础知识
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基础知识的更多相关文章
- CSS3 基础知识
CSS3 基础知识1.边框 1.1 圆角 border-radius:5px 0 0 5px; 1.2 阴影 box-shadow:2px 3px 4px 5px rgba(0,0,0 ...
- CSS3 基础知识[转载minsong的博客]
CSS3 基础知识1.边框 1.1 圆角 border-radius:5px 0 0 5px; 1.2 阴影 box-shadow:2px 3px 4px 5px rgba(0,0,0 ...
- css3基础知识——回顾
1.属性选择器 完全匹配的属性选择器 [id=article]{} 示例: <style> input[type=text]{ border: 2px solid red;} </s ...
- CSS3基础知识学习
CSS3动画例子展示 http://www.17sucai.com/pins/demoshow/13948 HTML5和CSS3特效展示 http://www.html5tricks.com/30-m ...
- 【前端】之CSS3基础知识
CSS3 私有化前缀 考虑到CSS3的兼容性问题,某些属性需要添加浏览器的私有化前缀 几种主流浏览器的私有化前缀如下: Chrome.Safari:-webkit- Firefox:-moz- IE: ...
- CSS3基础知识核心动画（二）
Transition过渡 transition-property 过渡属性 all|[attr] transition-duration 过渡时间 transition-delay 延迟时间 tran ...
- CSS3基础知识（一）
结构选择器 :nth-child(n) 第几个元素 从1开始设置 :nth-child(2n) 偶数元素 从0开始设置 :nth-child(2n+1) 奇数元素 :nth-of-type(n) :f ...
- 《HTML5与CSS3基础教程(第8版)》
<HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro ...
- HTML5与CSS3基础教程(第8版) PDF扫描版
<HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...
随机推荐
- HDU 5182
#include <iostream> #include <algorithm> #include <cstring> using namespace std; / ...
- 关于php的命名空间
php定义命名空间要使用namespace关键字,例:namespace Database 使用命名空间中的类要使用use关键字,也可以在use后面加as给类取别名,例:use Database\SQ ...
- html的块级元素和内联元素
常用的块级元素: address , center , div , dl ,, form , h1 , h2 , h3 , h4 , h5 , h6 , menu , ol , p , table , ...
- Webpack打包构建太慢了？试试几个方法
Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了 ...
- 阿里云RDS for SQL Server使用的一些最佳实践
了解RDS的概念 这也是第一条,也是最重要的一条,在使用某项产品和服务之前,首先要了解该产品或服务的功能与限制,就像你买一个冰箱或洗衣机,通常也只有在阅读完说明书之后才能利用起来它们的所以功能,以及使 ...
- iOS 从实际出发理解多线程
前言 多线程很多开发者多多少少相信也都有了解,以前有些东西理解的不是很透,慢慢的积累之后,这方面的东西也需要自己好好的总结一下.多线程从我刚接触到iOS的时候就知道这玩意挺重要的,但那时也是能力有限, ...
- eclipse中导入jsp等工程使用过程中常遇问题
1.导入的工程JSP文件出现报错的情况 这个一般不怎么影响文件的执行,这些文件飘红主要是因为eclipse的校验问题. 具体错误信息:Multiple annotations found at thi ...
- URL模块之parse方法
url.parse(urlString , boolean , boolean) parse这个方法可以将一个url的字符串解析并返回一个url的对象. 参数: urlString指传入一个url地址 ...
- SSM 五：Spring核心概念
第五章:Spring核心概念 一.Spring Ioc 优点: 1.低侵入式设计 2.独立于各种应用服务器 3.依赖注入特性将组建关系透明化,降低耦合度 4.面向切面编程的特性允许将通用性任务集中式处 ...
- PHP Xdebug安装及配置
1.首先在官方网站下载dll文件; Xdebug官方网站 2.将php_xdebug.dll文件放入php/ext文件夹下; 3.编辑php.ini,在文件最后加入如下代码: ; Xdebug zen ...