css 样式
什么是css样式？ Cascading Style Sheets 主要是用来修饰网页标签效果
（颜色，背景，文字效果，动画，布局，边框，阴影，圆角，过渡）
css2.0
css3.0 (阴影，圆角，过渡，动画)
css 新式框架
bootstrap
element ui for vue
Semantic ui
Foundation
layui
如何编写样式代码？
（1）第一种 在标签上直接编写 行内植入
<p style="color:red">红色文字</p>
（2） 在网页中定义一个style样式代码段
<head>
<style>
/* 样式代码 */
选择器{
样式：值 值;
样式：值;
}
*{
color:red;
}
</style>
</head>
(3)编写样式方式在，直接编写样式文件
css/index.css 文件
如果01.html网页要使用这个样式代码，
<head>
<link rel="stylesheet" href="css/index.css">
</head>
样式
选择器
div{} 标签选择器 选择符
#ad{color:red;}
.aa{color:green;font-size:35px;}
.ab{text-transform: uppercase;color:yellow !important;}
color:red !important;
颜色
color:red;
background-color:red;
颜色，透明色 rgba(255,255,255,255);
透明样式
opacity: 1; /*对象透明*/
字体、文本样式、文本效果
背景
边框
面试题：什么是cssreset ,会为什么要用css reset?
<h3>hello world</h3> .8 .5
*{
margin:0;
padding:0;
border:0;
}
伪类超链接效果设置
a
a:link
a:hover
a:visited
a:actvie
-ms-
-webkit-
-moz-
-o-
.user::-webkit-input-placeholder{
color:red;
}
样式 font 字体
font-style：normal | italic | oblique
ont-weight：normal | bold | bolder | lighter | <integer>
font-size：<absolute-size> | <relative-size> | <length> | <percentage>
font-family：[ <family-name> | <generic-family> ] #
简写
font:normal normal 65px/85px "微软雅黑","abc","hz"
font:24px/35px "";
font:bold 24px/35px "";
font:bold italic 24px/35px "";
/* css3 */
@font-face {
font-family: "hz";
src: url("font/h.ttf");
}
@font-face {
font-family: "abc";
src: url("font/SIMLI.TTF");
}
https://www.iconfont.cn/
样式文本 文本装饰
text-transform 控制文字大小写
line-height 行高
text-align 文本对齐方式 left center right
word-spacing 单词间距
letter-spacing 字符间距
text-indent 缩进效果
强制换行
word-break: break-all;
强制不换行
div{
white-space:nowrap;
}
text-decoration underline overline line-through
text-shadow 阴影
样式 背景 边框
#ffffff
#000000 简写 #000 #333 #333333 RRGGBB
#ffff33 #ff3
rgba(255,0,0,.5)
rga()
transparent 透明色
rgba(0,0,0,0)
背景颜色
background-color :#fff
背景图像
background-image:url()
background:#fff url("img/index_sp.png") no-repeat -161px -42px;
background-image:
/* linear radial */
background-image: linear-gradient(15deg,red,yellow);
/* border-radius: 50%; */
border 边框
border:0;
border:1px solid gray;
border-top:
border-bottom:
border-left:
border-right:
圆角效果
border-radius: 0 250px;
盒子阴影效果
box-shadow
样式 content counter 计数器
案例参考
https://edu.csdn.net/course/play/17052/245902
样式 变换 过度
text-transform 文本变换
transform ：rotate(45deg);
transform: rotatey(360deg);
: translate()
translateX()
translateY()
scale(.5,.5)
transform: skew(-45deg,15deg);
过度 transition:all .3s;
transition: width .2s,background-color 5s;
http://news.baidu.com/
动画
https://animate.style/
样式 定位 position
left
top
right
bottom
z-index
布局
display
float
clear
visibility
overflow
text-overflow
尺寸 宽 width
高 height
min-width
max-width
补白 margin
padding
#14152D
Disallow: /admin
