css(cascading stylesheet language)的总结

来源:互联网 发布:rxjava gson解析数组 编辑:程序博客网 时间:2024/06/08 16:31
一、样式的三种声明方式
行内样式(标签style属性)  直接利用的style属性
内联样式(头部style标签)  利用head里面的style双标签
外联样式(加载外部文件)   通过引入外部的css文件
<link rel="stylesheet" type="text/css" href="**.css" /> 
二、css语法特点
名字{属性:属性;}
注释:/*注释内容*/
三、常用的选择器
class选择器 .class名{}
id选择器 #id名{}
标签选择器 标签名{}
层级选择器 名字a 名字b 名字c{}
组合选择器 名字1,名字2,名字3{}
通配符 *{}
伪类选择器 父类 第一个子标签:nth-child(这里填写数字) 如:
.all div:nth-child(5) 这里的数值填写你要修饰的那个位置,是整体的位置
{ 不管是什么标签,反正是总体的位置
color:red;
}
.all p:nth-child(1)
{
color:blue;
}
<div class="all">
<p>我是检测伪类选择器5</p>
<div>我是检测伪类选择器1</div>
<div>我是检测伪类选择器2</div>
<div>我是检测伪类选择器3</div>
<div>我是检测伪类选择器4</div>
</div>
同时给多个a标签的四个属性设定不同的值
a标签的名字:link{
}
a标签的名字:visited{
   }
a标签的名字:hover{
 }
a标签的名字:active{
  }
属性选择器 input[type="text/css"]{}
四、尺寸
width: 宽度
height: 高度
min-height: 最小高度
max-height: 最大高度
min-width: 最小宽度
max-width: 最大宽度
五、单位
em 根据父级字体调节
rem 根据html字体调节
% 百分比
px 像素
vw 根据窗口的宽度
vh 根据窗口的高度
六、字体
font-style(normal italic oblique inherit)定义字体的风格
font-weight 定义字体是否加粗
font-size 定义字体的大小
font-family 定义字体的字体
font:style weight size family(简写形式,顺序不能变 且size family不能省略)
七、文本
text-indent 文本的缩进
text-align 文本的水平对齐方式
text-overflow 当文本超出指定区域后怎么处理
clip 修剪文本
ellipsis 用省略号来代替被剪的文本
string 给定的字符来代替被剪的文本
text-decoration 文本的下划线
none 默认
underline 下划线
overline 文本头上
line-through 贯穿文本
blink 定义闪烁的文本
inherit 从父类继承
text-shadow(h-shadow v-shadow blur color)文本的阴影
h-shadow 水平阴影的位置
v-shadow 垂直阴影的位置
blur 模糊的距离
color 颜色
text-height 文本的高度
line-height 行高
vertical-align 文本的垂直对齐方式
top
middle
bottom
八、背景
background-color 背景颜色
background-image 背景图片
background-repeat 图片的重复方式
repeat
repeat-x
repeat-y
no-repeat
inherit
background-attachment 背景图像位置是否固定
scroll 默认值,背景图像会随着页面其他部分滚动
fixed 不随页面其他部分滚动
inherit 继承父元素的特性
background-position 定位
background 可用来简写
九、列表
list-style(简写形式)
list-style-image 使用图像来替换列表项的标记
list-style-position 设置在何处放置列表标记项
inside 列表项目标记放置在文本以内
outside 默认值 列表标记放置在文本以外
inherit 从父级继承
list-style-type 设置列表项标记的类型(各种图形数字)
十、定位
position 例:position:relative;(其他的也一样的用法)
relative      top:12px;
absolution    left:20px;
fixed
top
right
bottom
left
z-index 设置显示的级别顺序,默认值是0(需要配合定位使用才会有效)
十一、布局
float 设置浮动 left right
clear 清除浮动 left right both
display 规定元素应该生成的框的类型(display:inline-block/none(不会被显示,也不会占据位置))
visibility 规定元素是否可见(visibility:visible/hidden)
overflow 设置文本超出规定区域后(overflow:hidden/scroll/auto/visible(默认的))
十二、边框
border 简写形式
border-width 边框的宽度
border-style 边框的样式(dotted solid double dashed)
border-color 边框的颜色
border-radius 边框是否设置圆角,也可以用来设置图片
box-shadow 边框的阴影
十三、外边距
margin 简写形式
margin-top 上边距
margin-right 右边距
margin-left 左边距
margin-bottom 下边距
十四、内边距
padding 内容到边界的距离
padding-top 内上边距
padding-right 内右边距
padding-bottom 内下边距
padding-left 内左边距



























原创粉丝点击