一、css3简介

1.什么是css3

CSS 用于控制网页的样式和布局
CSS3 是最新的 CSS 标准
CSS3是CSS2的升级版

2.css3的功能

选择器
盒模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面

二、css3选择器

1.属性选择器

element[att]
选择具有att属性的element元素
element[att=“val”]
选择就具有att属性且值=val的元素
element[att^=“val”]
选择具有att属性且以val开头的元素
element[att$=“val”]
选择具有att属性且值以val结尾的元素
element[att*=“val”]
选择具有att属性且值中含有val的元素
在input中 disabled 禁用

2.类选择器

.element

3.结构伪类选择器

element:first-child
匹配父元素中的第一个子元素element
element:last-child
匹配父元素在最后一个element元素
element:nth-child(n)
匹配父元素中的第n个子元素element
element:first-of-type
指定类型element的第一个
element:last-of-type
指定类型element的最后一个
element:nth-of-type(n)
指定类型element的第几个
n可以是数字、关键字、公式
even 偶数
odd 奇数

4.伪元素

:before 内容之前
:after 内容之后
before、after传教的元素属于行内元素

三、css3兼容性

兼容性处理

css3 样式在ie9以下不兼容用css3pipe 来处理兼容性
behavior:url(“js/pie.htc”);处理css3 在ie8或ie7上的兼容性
-webkit 谷歌
-moz 火狐
-ms IE
浏览器之间的样式差异处理重置浏览器的默认样式

    <link rel="stylesheet" href="./JD/css/normalize.css"/><style>.btn{width: 100px;height: 30px;line-height: 30px;outline-style: none;background-color: #231919;/*识别所有*/+background-color:red /*IE6,7识别*/_background-color:#3c3c3c/*ie6识别*/.background-color:pink /*6.7.8.9识别*/border-style : none;border-radius: 10px;-webkir-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;behavior: url("");}</style>

四、CSS3的样式

1.引入字体文件

    <style>@font-face {font-family: myfont;src: url("");}font-family:myfont;</style>

2.圆角属性

<head lang="en"><meta charset="UTF-8"><title></title><style>.box {position: absolute;left: 20px;top: 20px;margin: auto;width: 200px;height: 200px;border: 10px solid #000;font-size: 25px;text-align: center;line-height: 200px;border-radius: 10px 20px 30px 40px;/*border-radius: 20px 40px;*//*border-radius: 20px;*//*border-radius:10px 20px 30px;*/}</style>
</head>
<body>
<div class="box">文本
</div>
</body>

border-radius: 10px 20px 30px 40px;

border-radius: 20px 40px;

border-radius: 20px;

border-radius:10px 20px 30px;

3.阴影

前两个值是0是全边框阴影
第一个值是右框
第二个值是下框

<head lang="en"><meta charset="UTF-8"><title></title><style>.box {position: absolute;left: 20px;top: 20px;margin: auto;width: 200px;height: 200px;border: 10px solid #000;font-size: 25px;text-align: center;line-height: 200px;box-shadow: 10px 20px 10px red;/*box-shadow: 0 0 5px red,0 0 25px yellow,0 0 35px pink;*/}</style>
</head>
<body>
<div class="box">文本
</div>
</body>

box-shadow: 10px 20px 10px red;

box-shadow: 0 0 5px red,0 0 25px yellow,0 0 35px pink;

4.使用图像作为div元素的边框

<head lang="en"><meta charset="UTF-8"><title></title><style>.box {position: absolute;left: 20px;top: 20px;margin: auto;width: 200px;height: 200px;border: 10px solid #000;font-size: 25px;text-align: center;line-height: 200px;border-image-source: url("https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg");/*规定图像边框的向内偏移*/border-image-slice: 50% 50%;border-image-repeat: round;border-image-width: 10;}</style>
</head>
<body>
<div class="box">文本
</div>
</body>

5.背景图片

<head lang="en"><meta charset="UTF-8"><title></title><style>.box {position: absolute;left: 20px;top: 20px;margin: auto;width: 200px;height: 200px;border: 10px solid #000;font-size: 25px;text-align: center;line-height: 200px;background-image: url("https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg");background-size: 100%;background-repeat: repeat;/*内容框相对定位的背景图片*/background-origin: border-box;}</style>
</head>
<body>
<div class="box">文本
</div>
</body>

6.渐变

<head lang="en"><meta charset="UTF-8"><title></title><style>.box {position: absolute;left: 20px;top: 20px;margin: auto;width: 200px;height: 200px;border: 10px solid #000;font-size: 25px;text-align: center;line-height: 200px;background: linear-gradient(0deg,red,#fff,blue);background: linear-gradient(to bottom right,#fff,white);background: linear-gradient(0deg,red 10%,#fff 30%,blue);background: radial-gradient(red 30%,green 30%,blue);}</style>
</head>
<body>
<div class="box">文本
</div>
</body>

7.文本阴影

<head lang="en"><meta charset="UTF-8"><title></title><style>.box {position: absolute;left: 20px;top: 20px;margin: auto;width: 200px;height: 200px;border: 10px solid #000;font-size: 25px;text-align: center;line-height: 200px;text-shadow: 0 0 10px red;text-shadow: 0 0 10px red,4px 6px 6px orange;}</style>
</head>
<body>
<div class="box">文本
</div>
</body>

8.溢出省略

8.1单行溢出省略

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

8.2多行溢出省略

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;

CSS3概述、选择器、兼容性、样式相关推荐

css 选择器兼容性,css选择器与属性的兼容性问题
选择器兼容问题: 1.css2选择器兼容问题主要出现在IE6-7 IE6不支持多个类直接组合如:div.a.b会被当成div.b 解决办法:处理好选择器优先级 IE6不支持直接子元素,兄弟选择器如 ...
css3 选择器_IT兄弟连 HTML5教程 CSS3揭秘 CSS3概述
对于Web开发者来说,CSS3不只是一门新奇的技术,更重要的是这些全新概念的Web应用给开发人员带来了无限的可能性,也极大地提高了开发效率.我们不必再依赖图片或者JavaScript去完成圆角.多背景 ...
php表单偶数变颜色,利用CSS3 nth-child()选择器实现表格奇偶行变色
nth-child()简介 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一样.这 ...
:empty css 可以用在哪些标签,CSS3 :empty 选择器
这可是个好东西,我也是这个星期才发现的,下面我们来说具体功能. p:empty { width:100px; height:20px; background:#ff0000; } A paragrap ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
html5类选择器选择权重,Python Html5和CSS3的新增功能：CSS权重与CSS3新增选择器
一.CSS权重概念 CSS权重概念:指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 二.权重的等级 2.1.权重的等级划分 ...
jQuery与CSS3的选择器
2019独角兽企业重金招聘Python工程师标准>>> jQuery与CSS在选择器方面,有很多的相似之处,本文稍加总结,方便对比使用. 注:本文以jQuery1.9.1版本和CSS ...
css3学习之 css选择器(css3 属性选择器)
这是上一篇css选择器介绍里面内容比较详细..大家可以看看下面我将结合<HTML 5与css 3权威指南>这本书对css选择器再进行记录下里面有些个人见解如果看客觉得有问题.可以提出 ...
CSS3 ::selection选择器
一.介绍之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> ...
html5 css3浏览器,五大主流浏览器CSS3和HTML5兼容性大比拼
五大主流浏览器CSS3和HTML5兼容性大比拼出处:快科技 2011-05-26 16:15:42 编辑:萧萧[爆料] 收藏文章各大主流浏览器对CSS3和HTML5的支持越来越完善,曾经让 ...

CSS3概述、选择器、兼容性、样式