[ CSS-CSS3 ] 更适合你的CSS样式一览表

最新推荐文章于 2024-04-10 00:11:14 发布
最新推荐文章于 2024-04-10 00:11:14 发布
阅读量3.9k 收藏 46
点赞数 11
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45027204/article/details/105325097
版权

CSS样式一览表

CSS样式

CSS添加方法

  • CSS添加方法—行内
<p style = “color:red;”> 段落文字 </p>
  • CSS添加方法—内嵌样式
<style type="text/css">
p{
color:red; /*设置字体颜色*/
}
</style>
  • CSS添加方法—外部样式表
<link rel="stylesheet" href="css/style.css" />

1.多重样式可以层叠，可以覆盖
2.样式的优先级按照“就近原则”:
行内样式> 内嵌样式> 链接样式>浏览器默认样式

CSS选择器

标签选择器 p

h1 {font:“黑体";font-size:20px;} 
p {color:red; font-size:16px;} 
hr {width:200px;}

类别选择器 .one

/*CSS*/
<style type="text/css">
.one{ font-size:18px; } 
</style>
/*HTML*/
<p class="one">类别1</p>

ID选择器 #left

 /*CSS*/
<style type="text/css">
   #one{font-size:12px;}
   #two{font-size:24px;} 
</style>
/*HTML*/
<body>
   <p id="one">文字1</p> 
   <p id="two">文字2</p>
</body>

嵌套声明 p□span

 /*CSS*/
<style type="text/css">
	p span{ 
		color:red;
	}
</style>
/*HTML*/
<body>
	<p> <span>123</span> 456</p>
</body>
</style>

集体声明 p,h1

/*CSS*/
<style type="text/css">
 	h1,
 	p { text-align:center; }
</style>
/*HTML*/
<body> 
	<h1>欢迎</h1> 
	<p>访问</p>
</body>

全局声明 *

 /*CSS*/
 <style type="text/css">
  	*{
		text-align:center; 
	}
</style>
/*HTML*/
 <body>
	<h1>欢迎访问</h1> 
	<p>欢迎访问</p> 
	<h2>欢迎访问</h2>
</body>

CSS样式(I) 文本

  • 单位
单位描述
px像素
em自动适应用户所使用的字体
%百分比
  • 颜色
颜色描述
red,blue,green颜色名HTML颜色名
rgb(x,x,x)RGB 值 每个颜色分量取值0-255
rgb(x%, x%, x%)RGB 百分比值 0%-100%
rgba(x,x,x,x)RGB 值，透明度 a值:0.0-1.0
#rrggbb红色: #ff0000 红色: #f00 去掉重复位
  • 文本
属性描述取值
color 文本颜色red , #f00 ，rgb(255,0,0)
letter-spacing 字符间距2px , -3px
line-height 行高14px 1.5em 120%
text-align 对齐center left right justify
text-decoration 装饰线none overline underline line-through
text-indent 首行缩进2em
  • 字体font
属性 描述Value
font 在一个声明中设置所有的字体属性font: bold 18px ‘幼圆’
font-family 字体系列网页安全字体 font-family: “Hiragino Sans GB”, “Microsoft YaHei”, sans-serif;
font-size 字号14px 120%
font-style 斜体italic
font-weight 粗体bold

font属性简化的使用方法
font: 斜体 粗体 字号/行高 字体
font: italic bold 16px/1.5em ‘宋体’;

CSS样式(II) 背景与超链接

  • CSS背景
背景属性取值
背景颜色 background-color:red , #f00 ，rgb(255,0,0)
背景图片 background-image:url(“logo.jpg”)
背景重复 background-repeat:repeat repeat-x repeat-y no-repeat
背景 background颜色 图片 repeat
  • CSS超链接
链接的四种状态描述
a:link普通的、未被访问的链接
a:visited用户已访问的链接
a:hover鼠标指针位于链接的上方悬停
a:active链接被点击的时刻

按照以下次序:
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

CSS样式(III) 列表与表格

  • 列表List
属性描述
list-style所有用于列表的属性 设置于一个声明中
list-style-image为列表项标志设置图像 url(“images/bullet1.gif”);
list-style-position标志的位置 list-style-position: inside ;list-style-position: outside;
list-style-type标志的类型
  • list-style-type
值描述
none无标记
disc默认，标记是实心圆
circle标记是空心圆
square标记是实心方块
decimal标记是数字
lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-Greek小写希腊字母(alpha, beta, gamma, 等。)
lower-latin小写拉丁字母(a, b, c, d, e, 等。)
upper-latin大写拉丁字母(A, B, C, D, E, 等。)
  • CSS表格
CSS表格描述
width , height设置表格大小
border 属性边框 border: 1px solid #eee;
border-collapse 属性合并边框 border-collapse:collapse;
奇偶选择器:nth-child(odd|even)

CSS布局与定位

盒子模型(I) overflow和border

  • 盒子模型组成
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • overflow属性
overflow属性描述取值
超出部分不可见hidden
显示滚动条scroll
如果有超出部分，显示滚动条auto
  • border属性
border属性描述
border-width:px、 thin、medium、thick
border-style:dashed、dotted、solid、double
border-color:颜色
border:width style color

盒子模型(II) padding和margin

  • 对浏览器默认的设置清零
    *{
    margin: 0;
    padding: 0; }
  • padding margin 属性
组成内边距 外边距
上右下左padding:5px; margin:5px;
上padding-top :10% ; margin-top :10% ;
左padding-left ；margin-left ；
右padding-right；margin-right ；
下padding-bottom；margin-bottom；

在这里插入图片描述

  • margin合并
    在这里插入图片描述
  • 水平居中
    图片、文字水平居中 text-align:center;
    div水平居中 margin:0 auto;
    在这里插入图片描述
  • font-size：0; 解决图片自动生成的空隙
    在这里插入图片描述

CSS定位机制 display、float和position

  • 文档流定位 flow
元素分类——block描述
block元素特点1.独占一行 2.元素的height、width、margin、padding都可设置
常见的block元素div、p、h1…h6、 ol、ul、table、form
将元素显示为block元素 从而使元素具有块状元素特点display:block;
元素分类——inline描述
inline元素特点inline元素之间有一个间距问题
常见的inline元素span a
将元素显示为inline元素 从而使元素具有行内元素特点display:inline;
元素分类——inline-block描述
inline-block元素特点1.不单独占用一行 2.元素的height、width、margin、padding都可设置
常见的inline-block元素img
将元素显示为inline-block元素 从而使元素具有行内和块状元素特点display:inline-block;

元素不会被显示 display: none；
在这里插入图片描述

  • 浮动定位 float
浮动定位取值
float属性left、right
clear属性left、right、both
  • 层定位 layer
position属性描述
static:默认值没有定位，元素出现在正常的流中 top, bottom, left, right ， z-index无效
fixed:固定定位相对于浏览器窗口进行定位top, bottom, left, right ， z-index 有效
relative:相对定位相对于其直接父元素进行定位 top,bottom,left,right，z-index有效
absolute:绝对定位相对于 static 定位以外的第一个父元素 进行定位top, bottom, left, right ， z-index 有效

在这里插入图片描述

相对定位绝对定位
relativeabsolute
文档流中原位置保留文档流中原位置不保留
定位参照物直接父元素定位参照物非static的父元素

CSS3

CSS3(I) 圆角边框与阴影

  • border-radius属性
圆角边框border-radius描述
border-radius: 25px;上右下左25px 半径为25px的圆
border-radius: 20px 12px 24px 32px;上右下左圆角为25px 12px 24px 32px
border-top-left-radius左上角的形状
border-top-right-radius右上角的形状
border-bottom-left-radius左下角的形状
border-bottom-right-radius右下角的形状
  • 阴影box-shadow
    盒子阴影：水平位移10px，垂直位移10px，阴影模糊5px，阴影颜色#888
    box-shadow: 10px 10px 5px #888;
    在这里插入图片描述

CSS3(II) 文本与文字

  • text-shadow属性
    text-shadow属性 :水平偏移 垂直偏移 阴影大小 颜色
h1 {
	text-shadow:2px 2px #FF0000;
}

在这里插入图片描述
在这里插入图片描述

  • word-wrap属性
    允许长单词、URL强制进行换行
    word-wrap属性: normal
    word-wrap属性: break-word
    在这里插入图片描述
  • @font-face规则
    生成其他字体格式链接
    在这里插入图片描述
    在这里插入图片描述

CSS3(III) 2D转换

2D 转换方法 对元素进行旋转、缩放、移动、拉伸

  • 旋转transform:rotate( deg);
  • 缩放transform:scale(x,y);
    • x:水平方向缩放的倍数
    • y:垂直方向缩放的倍数，若省略，同x
    • 0~1,缩小;>1放大

CSS3(IV) 过渡与动画

  • 过渡 transition属性
    将元素的某个属性从“一个值” ,在指定的时间内过渡到“另一个值”
过渡transition描述
transition属性名 持续时间 过渡方法
transition-property属性名|all 对哪个属性进行变化
transition-duration持续时间
transition-timing-function过渡使用的方法(函数)
transition-delay延迟
  • transition-timing-function属性取值
值描述
linear匀速
ease慢快慢
ease-in慢快
ease-out快慢
ease-in-out慢快慢
  • 动画
    (1)定义动画@keyframes规则
    (2)调用动画animation属性 在这里插入图片描述
    (3)animation属性取值
值描述
animation简写
animation-name引用 @keyframes 动画的名称
animation-duration动画完成时间
animation-timing-function规定动画的速度曲线。默认是 “ease”。
animation-play-staterunning | paused

CSS3(V) 3D变换

在这里插入图片描述

  • 3D移动
    沿X轴移动 - tranform: translateX( px);
    沿Y轴移动 - tranform: translateY( px);
    沿Z轴移动 - tranform: translateZ( px);
    在这里插入图片描述
  • 透视效果
    在这里插入图片描述
    在这里插入图片描述

本文整理自中国大学MOOC网/Web前端开发 孙俏老师的PPT和视频内容，如果有不清晰的知识点，可以搜索孙俏老师的视频进行学习，整理不易，有用记得收藏+点赞+评论哦。在这里插入图片描述

芬贝
关注
  • 11
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
CSS3---新增内容
qq_45802159的博客
11-23 496
CSS3简介 如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。 CSS3的兼容情况 CSS3给开发人员带来了很多有趣的功能，同时也为用户提供了更好的用户体验。但是，这一切并不是所有的浏览器都完全支持。目前主流的浏览器都采用了私有属性的形式来支持CSS3属性，以便让用户体验CSS3的新特...
[ CSS-CSS3 ] 史上最全CSS样式一览表
01-08
CSS样式一览表CSS样式CSS添加方法CSS选择器CSS样式(I) 文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和...
css3基本样式汇总
kinglyjn的博客
12-29 1880
背景background-attachment /*背景图像是否固定或随着页面的奇遇部分滚动 fixed*/ background-color background-image /*url("xxx.jpg")*/ background-repeat /*设置背景图片是否及如何重复 repeat no-repeat repeat-x repat-y*/ background-pos
css3样式
kun_moon的博客
08-27 195
CSS3属性 CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。 1.选择器 2.盒模型 3.背景和边框 4.文字特效 5.2D/3D转换 6.过渡 7.动画 CSS3高级选择器 p:first-of-type : 返回指定p元素的第一个 p:last-of-type : 返回指定p元素的最后一个 p:first-child : 返回其父元素的首个子元素p p:last-chil...
CSS3样式大全
Java_53的博客
12-18 1316
CSS3 样式大全 动画属性; 属性:描述:CSS; @keyframes:定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。; animation:复合属性。检索或设置对象所应用的动画特效。; animation-name:检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义; animation-duration:检索或设置对象动画的持续时间; animation-timing-function:检索或设
CSS3 常用样式
最新发布
一切不是冲你而来的，一切都是为你而来的。
04-10 1308
HTML5和CSS3-17(18)-2
CSS语法一览表
07-22
资源名称：CSS语法一览表资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
CSS-cursor鼠标样式一览表
02-18
在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、XHTML等）文档呈现方式的样式表语言。其中，`cursor`属性是CSS中的一个重要特性，它允许开发者自定义鼠标指针在不同元素上显示的...
CSS3技能训练-历史事件展现.pptx
05-06
单元二CSS3技能训练;训练目标;训练任务;历史事件一览表;团队合作一览表;作品提交要求
css3样式总结
Nobita
01-09 250
css(鼠标悬停时，图片缓缓变大) .templatelist .content a.logo &gt;img { transition: all 0.6s; width: 432px; height: 280px; overflow: hidden; } .templatelist .content a.logo &gt;img:hover { tr...
css3特效样式库
n9nzjx57bf的博客
05-18 191
直接调用样式类即可： 1 /* animation */ 2 .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;} 3 .a
常用的CSS3样式
weixin_44828071的博客
06-04 933
CS3样式 css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面 选择器 框模型 背景和边框 border-radius、box-shadow、border-image、 background-size：规定背景图片的尺寸 background-origin：规定背景图片的定位区域 background-clip：规定背景的绘...
CSS3 样式
kyl282889543的博客
02-01 313
CSS3样式1. CSS 样式表概要2. 常用CSS 样式2.1 字体属性：(font)2.2 背景属性： (background)2.3 区块属性： (Block)2.4 盒子属性： (Box)2.5 列表属性： (List-style)2.6 定位属性： (Position)2.7 CSS文字属性2.8 CSS边框空白2.9 CSS符号属性2.10 CSS背景样式2.11 CSS连接属性2...
CSS3样式
weixin_30364325的博客
08-15 108
简介：CSS 用于控制网页的样式和布局，CSS3 是最新的 CSS 标准。 边框 圆角：border-radius。左上，右上，右下，左下 #yuanjiao{ width: 100px; height:100px; border: 1px solid red; border-radius: 3px 5px 10px 15px; } <div id="y...
css3样式有哪些？
no_one_but_you的博客
10-20 480
2D 转换 2D 转换是改变标签在二维平面上的位置和形状 移动： translate 旋转： rotate 缩放： scale translate 语法 x 就是 x 轴上水平移动 y 就是 y 轴上水平移动 transform: translate(x, y) transform: translateX(n) transfrom: translateY(n) 2D 的移动主要是指 水平、垂直方向上的移动 translate 最大的优点就是不影响其他元素的位置 translate 中的100%单位，是相对于
CSS3常见样式总结
qq_43690340的博客
08-19 220
设置弹性盒模型 box-sizing : border-box 注意 设置怪异模式之后，border不会把盒子撑大 设置怪异模式之后，padding不会把盒子撑大 限制textarea 禁止改变大小 resize : none; 设置外边线 outline-width : 2px;//设置外边框轮廓宽度 outline-style : solid;//设置外边框样式 transition : all 0.5s;//过渡效果 outline-offset : 30px;//设置外边框轮廓 outline-
【CSS3】设置列表样式
Need not to know
03-03 337
列表样式 列表项标记类型 属性 说明 示例 list-style 在一个声明中设置所有列表属性 list-style: none;   ※列表属性设置顺序 ： { list-style-type: 值; } ↓ { list-style-position: 值; } ↓ { list-style-image: 值; }   在实...
实用的css3样式
菜鸡博客
09-21 137
1.word-wrap word-wrap: normal | break-word;只在允许的断字点换行（浏览器保持默认处理）。 断字/ 在长单词或URL地址内部进行换行。 2.@font-face Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体. Fir...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值