CSS样式
CSS添加方法
<p style = “color:red;”> 段落文字 </p>
<style type="text/css">
p{
color:red;
}
</style>
<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
<style type="text/css">
.one{ font-size:18px; }
</style>
<p class="one">类别1</p>
ID选择器 #left
<style type="text/css">
#one{font-size:12px;}
#two{font-size:24px;}
</style>
<body>
<p id="one">文字1</p>
<p id="two">文字2</p>
</body>
嵌套声明 p□span
<style type="text/css">
p span{
color:red;
}
</style>
<body>
<p> <span>123</span> 456</p>
</body>
</style>
集体声明 p,h1
<style type="text/css">
h1,
p { text-align:center; }
</style>
<body>
<h1>欢迎</h1>
<p>访问</p>
</body>
全局声明 *
<style type="text/css">
*{
text-align:center;
}
</style>
<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 |
属性 描述 | 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) 背景与超链接
背景属性 | 取值 |
---|
背景颜色 background-color: | red , #f00 ,rgb(255,0,0) |
背景图片 background-image: | url(“logo.jpg”) |
背景重复 background-repeat: | repeat repeat-x repeat-y no-repeat |
背景 background | 颜色 图片 repeat |
链接的四种状态 | 描述 |
---|
a:link | 普通的、未被访问的链接 |
a:visited | 用户已访问的链接 |
a:hover | 鼠标指针位于链接的上方悬停 |
a:active | 链接被点击的时刻 |
按照以下次序:
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
CSS样式(III) 列表与表格
属性 | 描述 |
---|
list-style | 所有用于列表的属性 设置于一个声明中 |
list-style-image | 为列表项标志设置图像 url(“images/bullet1.gif”); |
list-style-position | 标志的位置 list-style-position: inside ;list-style-position: outside; |
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表格 | 描述 |
---|
width , height | 设置表格大小 |
border 属性 | 边框 border: 1px solid #eee; |
border-collapse 属性 | 合并边框 border-collapse:collapse; |
奇偶选择器 | :nth-child(odd|even) |
CSS布局与定位
盒子模型(I) overflow和border
overflow属性描述 | 取值 |
---|
超出部分不可见 | hidden |
显示滚动条 | scroll |
如果有超出部分,显示滚动条 | auto |
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; |
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ca8bc9cd75018ef9c3d9013af62fb2b8.png)
- margin合并
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/dfa454df77456cb287defdbd57a68917.png)
- 水平居中
图片、文字水平居中 text-align:center;
div水平居中 margin:0 auto;
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c5dab9cb590a5a344116a619d463319b.png)
- font-size:0; 解决图片自动生成的空隙
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6b2d0e5c821f3e2d828df4b9aae00dc8.png)
CSS定位机制 display、float和position
元素分类——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;
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/dafe7f36ef39a7c911b5ea1e70425393.png)
浮动定位 | 取值 |
---|
float属性 | left、right |
clear属性 | left、right、both |
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 有效 |
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/45bf428abe354cec91f63679365540a1.png)
相对定位 | 绝对定位 |
---|
relative | absolute |
文档流中原位置保留 | 文档流中原位置不保留 |
定位参照物直接父元素 | 定位参照物非static的父元素 |
CSS3
CSS3(I) 圆角边框与阴影
圆角边框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;
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c07d914a38ce3837efd52e9bf9aa3767.png)
CSS3(II) 文本与文字
- text-shadow属性
text-shadow属性 :水平偏移 垂直偏移 阴影大小 颜色
h1 {
text-shadow:2px 2px #FF0000;
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1995e238c4b679f8877222b0430ddf48.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/471567a7fd02f3d79d1b7a890c365145.png)
- word-wrap属性
允许长单词、URL强制进行换行
word-wrap属性: normal
word-wrap属性: break-word
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/eec6fd5ef5c04a9f51932c4dde3590c6.png)
- @font-face规则
生成其他字体格式链接
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8058469e2ff5385814cf0817ea6e6696.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e10a73e7b23799c1811440426117923b.png)
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属性 ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8e8973d20b55548cbad467bb255511a0.png)
(3)animation属性取值
值 | 描述 |
---|
animation | 简写 |
animation-name | 引用 @keyframes 动画的名称 |
animation-duration | 动画完成时间 |
animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 |
animation-play-state | running | paused |
CSS3(V) 3D变换
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/73b9da0affa0b2ac4235e30e3cf766b4.png)
- 3D移动
沿X轴移动 - tranform: translateX( px);
沿Y轴移动 - tranform: translateY( px);
沿Z轴移动 - tranform: translateZ( px);
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1aca16c408abf2b2abe6a6ddf4493f57.png)
- 透视效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e3b0f4dd8a070285296e5ad57b362edd.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1c18850fb7643fea2e675c0e1fcc5f00.png)
本文整理自中国大学MOOC网/Web前端开发 孙俏老师的PPT和视频内容,如果有不清晰的知识点,可以搜索孙俏老师的视频进行学习,整理不易,有用记得收藏+点赞+评论哦。![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/94075ec54fc28e432f488b8aeff389e2.jpeg)