css篇
css层叠样式表
- 行内样式列表
<any style="样式名：样式值;"></any>
- 页面内样式
<head>
<style>
标签名{
样式名：样式值；
}
</style>
</head>
- 外部样式表
<head>
<link rel="stylesheet" type="text/css" href="链接样式表文件.css"/>
</head>
优先级
行内>页面内>外部样式表
文字的排版样式使用
color:red; //字体颜色：红色
text-align:center; //文本居中 left/center/right/justify 左/中/右/两端对齐
font-weight:bold; //字体加粗 bold/bolder
font-style: italic; //字体倾斜
text-decoration: underline/none; //下划线/去掉下划线
font-size:19px; //字体大小：19像素；
font-family:宋体；
font:19px 宋体; //字体大小 字体；
背景与颜色的使用
background:背景颜色 背景图片 背景是否重复 背景定位位置
//背景图片 url(图片路径)
// 是否重复 repeat/no-repeat/repeat-x/repeat-y 重复/不重复/水平重复/垂直重复
//背景定位位置 left/center/right 水平左中右 top/center/bottom 垂直上中下
background-size:精确像素/百分比 /em/rem 背景图片大小控制
background-attachment: scroll; //背景图片固定定位 scroll 滚动 fixed 固定
width:400px; 宽度
height:300px; 高度
border:solid 1px #000; 边框线 ：实线 线粗细 线颜色
线形
- solid宽度
- double双线
- dottol点状线
- dashed虚线
- none无边框线
边框风格-body style
none: 默认无边框
dotted: 定义一个点线框
dashed: 定义一个虚线框
solid: 定义实线边界
double: 定义两个边界。 两个边界的宽度和border-width的值相同
groove: 定义3D沟槽边界。效果取决于边界的颜色值
ridge: 定义3D脊边界。效果取决于边界的颜色值
inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
outset: 定义一个3D突出边框。 效果取决于边界的颜色值
定义选择器
1、类选择器的定义方式(可以多次调用)
命名：
.name{}
调用：
<any class="name"></any>
2、标签选择器的定义方式 （只要符合标签，都自动调用）
命名：
标签名{} // p{}
调用
<标签>
3、ID选择器定义方式 （只能调用一次）
命名：
#name{}
调用：
<any id="name"></any
填充
填充：
padding-top
padding-left
padding-right
padding-bottom
简写：
padding:值
padding:a
一个值表示四边相同的填充
padding:a b;
两个值表示上下是a，左右是b
padding:a b c;
三个值表示上是a,左右是b,下是c
padding:a b c d;
四个值表示：上，右，下，左
边距：
margin-top
margin-left
margin-right
margin-bottom
简写：
margin:值
margin:a
一个值表示四边相同的填充
margin:a b;
两个值表示上下是a，左右是b
margin:a b c;
三个值表示上是a,左右是b,下是c
margin:a b c d;
四个值表示：上，右，下，左
单独css界面
*{ //通配符
margin:0;
padding:0;}
行高 ling-height 行间距
一般用行高布局垂直对齐方式
行高和高度一致，内容在垂直正中间
行高比高度大，内容在偏下
行高比高度小，内容偏上
首行缩进
text-indent:2em; 首行缩进两个字符
常用
单位：
px 像素 % 百分比 em rem
颜色
red #ff0000 #f00 rgb(255,0,0)
#000000 黑色 #ffffff / #fff白色 #ff0000 / #f00 红色 #00ff00 /#0f0 绿色 #0000ff / #00f蓝色 #aaa #999 #666 灰色
浮动：
float:left /right 左浮动、右浮动
margin:0 auto;水平居中
文本转换
text-transform:uppercase/lowercase/capitalize
大写、小写、首字母大写
列表：
list-style-type 列表样式
list-style-image 列表图片
list-style
伪类选择器：
超链接四种状态
a:link 访问前的状态
a:hover 鼠标悬停时状态
a:active 鼠标点击时的状态
a:visited 访问后的状态
后代选择器
格式：父元素/祖先元素 子元素
eg : div a / .nav a
行内元素(内联元素) a span input img label select strong b
块级元素 div p h1~h6 table ul ol dl form pre
display:block; 转换为块级元素 （占一行）
display:inline-block; 转换为行内块 （宽高起作用）
display:inline; 转换为行内元素 （占内容位置）
父子选择器
格式：父元素>子元素
eg: .box>a
display：block 显示
display:none 隐藏
visibility: hidden;隐藏
visibility:visible; 显示
display和visibility区别：
display隐藏不占位置
visibility隐藏占位置
文本的溢出
overflow:hidden;
text-overflow:eclipse;
white-space:nowarp;
图片溢出
overflow:hidden;
线性渐变
：：after，：：before{
content" ";
linear-gradient(270deg,red,yellow,green,pink) 线性渐变}
注释
270和90为水平方向的渐变
0和180为垂直方向的渐变
扫一扫
338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
