CSS3常用选择器和属性

最新推荐文章于 2020-09-08 20:31:01 发布
最新推荐文章于 2020-09-08 20:31:01 发布
阅读量547 收藏 1
点赞数
分类专栏： web前端学习记录 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WiniceS/article/details/76682292
版权

CSS3常用选择器

CSS3常用高级选择器
选择器实例描述
first-of-typep:first-of-type选择属性其父元素的首个元素的每个元素
last-of-typep:last-of-type选择属性其父元素的最后元素的每个元素
last-childp:last-child选择属性其父元素的最后一个子元素的每个元素
nth-child(n)p:nth-child(n)选择属性其父元素的第n个子元素的每个元素
beforep:before在每个元素的内容之前插入内容
afterp:after在每个元素的内容之后插入内容

在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后，建议按照标准双写

<head>  //其他东西省略了
<style>
    .useafter::after{
        content:"我使用了after了";
        color: blue;
    }
</style>
</head>
<body>
    <div>
        <span class="useafter">使用after</span>
    </div>
</body>

使用after
这里需要注意的是，after加的内容是加在元素内容区域。
其他有许多选择器，jQuery中也有要用到，详见W3CSCHOOL手册。

CSS3常用属性

浏览器对CSS3的支持
div{
  transform:rotate(30deg);          //旋转30度
  -ms-transform:rotate(30deg);      //IE9
  -moz-transform:rotate(30deg);     //Firefox
  -webkit-transform:rotate(30deg);  //Chorme和Safari
  -o-transform:rotate(30deg);       //Opera
}
边框
属性描述
border-radius用于创建圆角
border-image使用图片创建边框
box-shadow用于向方框添加阴影
//css代码
        .border-radius {width: 200px;height: 200px;line-height: 200px;
            background-color: skyblue;border-radius: 50%;
            text-align: center;}
        .second {border-radius: 50px;}
//html代码
    <div class="border-radius">border-radius</div>
    <div class="border-radius second">border-radius2</div>

border-radius

border-image

属性值描述
border-image-source用在边框的图片的路径。
border-image-slice图片边框向内偏移。
border-image-width图片边框的宽度。
border-image-outset边框图像区域超出边框的量。
border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

语法，可简写。
border-image:url(border.png) 30 30 round;

阴影 box-shadow属性

属性值描述
h-shadow必需，水平阴影位置，允许负值
v-shadow必需，垂直阴影位置，允许负值
blur可选，模糊距离
spread可选，阴影的尺寸
color可选，阴影的颜色
inset可选，将外部阴影（outset）改为内部阴影

box-shadow:h-shadow v-shadow blur spread color inset

//css代码
.border-radius {margin-left:50px;float: left;width: 150px;height: 150px;
    background-color: skyblue;text-align: center;
    box-shadow: 10px 10px; font-size: 12px;}
.second{box-shadow: 10px 10px 5px; }
.third{box-shadow: 10px 10px 5px 10px;}
.forth{box-shadow: 10px 10px 5px 10px salmon;}
.fifth{box-shadow: 10px 10px 5px 10px salmon inset;}
//html代码
<div class="border-radius">box-shadow: 10px 10px</div>
<div class="border-radius second">box-shadow: 10px 10px 5px(blur)</div>
<div class="border-radius third">box-shadow: 10px 10px 5px 10px(spread)</div>
<div class="border-radius forth">box-shadow: 10px 10px 5px 10px salmon</div>
<div class="border-radius fifth">box-shadow: 10px 10px 5px 10px salmon inset</div>

box-shadow

文本效果
属性描述
text-shadow文本阴影效果
word-wrap允许长单词换行到下一行

text-shadow:h-shadow v-shadow blur color

背景
属性描述
background-size规定背景图片的大小
background-origin规定背景图片的定位区域
background-clip规定背景的绘制区域
值background-origin值说明background-clip值说明
padding-box背景图像相对于内边距框来定位背景被裁剪到内边距框
border-box背景图像相对于边框盒定位背景被裁剪到边框盒
content-box背景图像相对于内容框来定位背景被裁剪到内容框

background-origin

background-size

属性值描述
cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小（全部填充）
contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小（可能不会全部填充）
CSS透明度
background:rgba(0,0,0,.5);
opacity:0.8; 0-1
filter:alpha(opacity=80); //针对IE8以及更早版本
background-color:transparent;
2D变形

transform:对元素进行移动、缩放、倾斜、翻转
浏览器支持
IE10、Firefox和opera支持2D
chrome和Safari需要前缀-webkit-
IE9需要前缀-ms-

属性值描述
translate()元素从当前位置移动至给定的位置（x坐标 y坐标）
rotate()元素顺时针旋转给定的角度，负值表示逆时针旋转
scale()元素的尺寸会增加或减少，根据给定的宽度和高度
skew()元素翻转给定的角度，根据给定的水平线和垂直线
matrix()把所有的2D方法组合在一起

translate()

属性值描述
translate(x，y)2D转换，沿X轴和Y轴移动元素
translateX(n)2D转换，沿X轴移动元素
translateY(n)2D转换，沿 Y轴移动元素

rotate()

属性值描述
rotate(n deg)度数

scale()

属性值描述
scale(x，y)2D缩放转换，改变元素的宽度和高度
scaleX(n)2D缩放转换，改变元素的宽度
scaleY(n)2D缩放转换，改变元素的高度 负的会反转

skew()

属性值描述
skew(x-angle，y-angle)2D倾斜转换，沿X轴和Y轴
skewX(x-angle)2D倾斜转换，沿X轴
skewY(y-angle)2D倾斜转换，沿Y轴

这里提一点的是可以通过transform:translate来使元素处于中间位置

.needcenter{width: 200px;height: 200px;line-height: 200px;
position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);
background-color: skyblue;text-align: center;}

中心位置

3D转换
属性描述
transform2D或3D转换
transform-origin允许改变转换元素的位置
transform-style嵌套元素在3D空间如何显示
perspective规定3D元素的透视效果
perspective-origin规定3D元素的底部位置
backface-visibility元素在不面对屏幕时是否可见

transform-origin
transform-origin:x-axis y-axis z-axis;

属性值描述
x-axisx轴的值:left、center、right、length、%
y-axisy轴的值:left、center、right、length、%
z-axisz轴的值:length

默认定位在元素的中心位置
在2D的情况是更改元素的中心点

perspective
仅chrome和safari支持，加前缀webkit

属性值描述
number元素距离视图的距离，单位:px
none默认值，与0相同，不设置透视

transform-style
一定要在父级加上这个属性
IE不支持，其他浏览器需要加前缀

属性值描述
flat子元素将不保留其3D效果
preserve-3d子元素将保留其3D效果

这里值的注意的是，在使用3D转换时，必须要在父级上加transform-style:preserve-3d;和perspective:1000px；才有3D效果，不然没有。transform-style可以理解为模式是否为3D模式，而perspective可以理解为AE中的摄像机。
3D位移、旋转、缩放

属性属性值描述
3D位移translate3d(x,y,z)3D转换
3D位移translateX(x)2D和3D转换，X轴的值
3D位移translateY(y)2D和3D转换，Y轴的值
3D位移translateZ(z)3D转换，Z轴的值
3D旋转rotate3d(x,y,z（x,y,z值为0-1之间）,a（角度）)3D旋转
3D旋转rotateX(x)3D旋转，X轴的值
3D旋转rotateY(y)3D旋转，Y轴的值
3D旋转rotateZ(z)3D旋转，Z轴的值
3D缩放scale3d(x,y,z)3D缩放
3D缩放scaleX(x)3D缩放，X轴的值
3D缩放scaleY(y)3D缩放，Y轴的值
3D缩放scaleZ(z)3D缩放，Z轴的值（需要其他的变形属性一起使用）
过渡动画属性

transition:property duration timing-function delay;

属性值描述
property规定应用过渡的CSS属性名称，值：none
duration定义过渡效果花费的时间（秒或者毫秒），默认0没有动画
delay规定过渡效果何时开始，以秒或者毫秒计，默认0没有动画
timing-function规定过渡效果的时间曲线，默认ease

timing-function的属性值

属性值描述
linear规定以相同速度开始至结束的过渡效果
ease规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in规定慢速开始的过渡效果
ease-out规定慢速结束的过渡效果
ease-in-out规定慢速开始和结束的过渡效果
动画

创建动画的步骤

  1. @keyframes: 创建动画（关键帧）
  2. animation: 在对应元素上使用动画

创建了动画后别忘记使用动画。

@keyframes使用规则

@keyframes animationname(动画名称){
     keyframes-selector(动画时长的百分比，值0-100%，from（与0%相同），to（与100%相同）){
      css-style;（css样式）
    }
}

动画属性

属性描述
animation-name@keyframes动画规定的名称，值：none：规定无动画效果；keyframename：@keyframes的名称
animation-duration规定完成动画所花费的时间，秒或毫秒计，默认值为0，意味着没有动画效果
animation-timing-function规定过渡效果的时间曲线,值linear、ease、ease-in、ease-out、ease-in-out
animation-delay规定过渡效果何时开始，以秒或者毫秒计，默认0没有动画
animation-interation-count规定动画的播放次数，值：n：定义动画播放次数的数值；infinite：定义动画应该无限次播放
animation-direction定义是否应该轮流反方向播放动画，值：normal：默认值，动画应该正常播放；alternate：动画应该轮流反方向播放

动画的实例就不放了，做过视频的应该了解就是创建关键帧的过程。
浏览器兼容在@后面加，比如@-ms-keyframes

本博客仅用于记录web前端学习情况

WiniceS
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 选择器 基本选择器介绍
12-13
第二部分我把他称作是属性选择器，第三部分我把他称作伪类选择器，这一部分也是最难理解和掌握的部分，今天我们先来看第一部分——基本选择器。我们先来看一个常用的选择器列表图 下面我们先看看上
CSS3选择器（详细！全！）
FishC的博客
11-17 6532
CSS3选择器（详细！全！）
常用的CSS3选择器
fantasy_geek的博客
03-05 3145
常用的CSS选择器 CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。 伪选择器比较特殊，分为伪元素和伪类元素两种。 一、属性选择器 1.E[att^=value]属性选择器 E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配...
css3常用选择器
xiaoritai7803的博客
12-26 227
css3常用选择器
CSS3选择器大全
热门推荐
Shadow_Weirdo
08-16 3万+
1.CSS3选择器 属性选择器 在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。 input[type=&quot;text&quot;] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana...
CSS3选择器（全部）
GreenBark
10-16 8692
CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，让编写代码更加轻松。 1，基本选择器 （1）标签选择器(类型选择器)             统一定义常用标签的基本样式。 ​ &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;...
四种CSS常用的选择器使用方法和注意事项
12-04
本文为大家分享了CSS中常用的四种选择器，供大家参考，具体内容如下 1、类选择器（class选择器） 基本使用：  .类选择器{  属性名: 属性值;  …  } 案例： CSS Code复制内容到剪贴板 /*类选择器*/  .s1{  ...
CSS属性简写和选择器的优先级问题
01-19
几个常用 CSS 属性的简短写法 精简 CSS 代码有很多种方法，但其中最常用的方法可能就是使用属性的简短形式。 具有简短写法的 CSS 属性很多，但是常用的属性无外乎字体、列表、背景、边框、透明等几种，所以在此对这...
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
选择器1选择器2选择器3{ 属性： 属性值； } 用选择器1选择元素集合A，用选择器2在A中选择元素 标签名只能写在前面并且只能有一个标签 （5）伪类选择器（只用于链接 用：表示） a:link 未访问过的链接 a:...
HTML5&CSS3网页制作：伪元素选择器.pptx
06-01
CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器 :before选择器 :after选择器 :before选择器 描述 :before伪元素选择器用于在被选元素的内容前面插入内容。 语法格式 E:before{ content:文字/url...
CSS3常用选择器一览表
ganlubaba666的博客
11-24 205
前端必须掌握30个CSS3选择器
音韵者天
09-28 2581
也许你已经学会了CSS的三个简单常用的选择器：#ID，.class，标签选择器，可是这些就足够了吗？随着CSS3的到来，作为前端开发者需要掌握下面三十个基本的选择器，这样才可以在平时开发中得心用手。本文中将综合前端开发中常用的30个CSS3选择器，并且附带了浏览器的支持情况，希望对大家有所帮助。*：通用元素选择器* { margin: 0; padding: 0; } *选择器是选择页面上的全部元素
CSS常用选择器
forever_wen的博客
09-28 9577
CSS （层叠样式表） 编辑 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式...
CSS3选择器（选择符）
浪神无敌
08-27 1万+
CSS3选择器分类 本文列举常用的几种选择器 一、层级选择器 E&amp;amp;gt;F 子选择器 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素 HTML代码： &amp;amp;lt;div&amp;amp;gt; &amp;amp;lt;h3&amp;amp;gt;我是标题&amp;amp;lt;/h3&amp;amp;gt; &amp;amp;lt;p&amp;amp;gt;我第
CSS3中常用的几种选择器
Web_chicken的博客
09-08 8800
css中几种常用的选择器 1.通配符 *{ margin:0; padding:0; } 因为浏览器默认有margin和padding 而通配符主要作用就是去掉margin和padding 一般写在css最前 2.id选择器 #first{ color:red; } <div id="first">我是id选择器</div> id选择器 调用css样式时需要用# 不推荐使用i
CSS3选择器介绍及用法总结
尐轩web前端网络日志
11-16 6980
CSS3新增了很多强大的选择器 它可以让我们少写一些js事件脚本 我们先来看看各个版本的选择器有哪些 注： ele代表element元素 attr代表attribute属性，val代表value属性值 :xxx都属于伪类选择器，::xxx都属于伪元素选择器 有名字的选择器我尽量细分了CCS1选择器 选择器 类型 示例 说明 .class 类选择器 .demo
css3中常见的30个选择器
大董的博客
12-30 3306
1 *：通用选择器 * { margin:0; padding:0; } *选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除浏览器默认样式的方法。 *选择器也可以应用到子选择器中，例如下面的代码： #container * { border:1px solid black; } 这样ID
【CSS3】常用的选择器
December_shi的博客
09-08 1179
1.交集选择器(紧挨着) 交集选择器是由两个选择器直接连接构成的，其中第一个必须是标签选择器，第二个必须是类选择器或者ID选择器，这两个选择器之间不能有空格，必须连续书写 p.txt{ color:blue; } <p>恰是一江<span class="txt">春水1</span>向东流</p> <!-- 不变蓝 --> <span class="txt">春水2</span> <!-- 不变蓝
解释CSS样式的引用方式，CSS选择器和常用属性
最新发布
06-07
CSS 样式表语言用于描述网页的表现样式。在 HTML 中，我们可以通过三种方式引入 CSS 样式表：内联样式、内部样式和外部样式。 1. 内联样式：内联样式...通过组合使用选择器和属性，我们可以创建出丰富多彩的网页样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值