学习02-css基本内容

css的样式可分为：

行内式：

<div style="color: red;">
        行内样式
</div>

内部式：

在head标签里写

<style>
        div {
            color: red;
        }
</style>

外部式：

引用外部的css

<link rel="stylesheet" href="css地址">

css选择器

标签选择器：

div {
      color: red;
    }

类选择器：

.nav {
            color: red;
        }

id选择器：

 #nav {
            color: red;
        }

css外观属性总结

属性	表示	注意
color	颜色	通常使用十六进制如#fff
line-height	行高	控制行与行之间的距离
text-align	水平对其	可以设定文字水平的对其方式
text-indent	首行缩进	首行缩进2个字符间距
text-decoration	文本修饰	添加下划线underline

复合选择器：

选择器	作用	使用情况	特征	隔开符号及用法
后代选择器	用来选择元素后代	较多	是选择所有的子孙后代	符号是空格 .nav a
子代选择器	选择最近一级元素	较少	只选择亲儿子	符号是> .nav>p
交集选择器	选择两个标签交集部分	较少	即是又是	没有符号 p.one
并集选择器	选择某些相同样式的选择器	较多	可以用于集体声明	符号是逗号 .nav,.header
链接伪类选择器	给链接更改状态	较多		重要记住a{}和a:hover实际开发写法

标签显示模式：

显示模式	典型代表	特点
块级标签	div、h1~h6、p、ul、ol、li、dl、dt、dd等	可以设置行高，独占一行
行内标签	span、a、b、u、i、strong、em、del、ins等	不可以设置行高，一排可以放多个
行内块标签	img、input、textarea、select等	可以设置宽高，不独占一行

display: inline; //转换为行内元素
display: block; //转换为块级元素
display: inline-block; //转换为行内块元素

css背景：

属性	作用	值
background-color	背景颜色	background-color：red;默认值：transparent透明色
background-image	背景图片	background-image：url(图片地址不用加引号)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	参数：position；值：top
background-attachment	背景固定还是滚动	scroll：背景图像随对象内容一起滚动，fixed：背景图像固定
背景简写	更简单	background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置；
背景透明	让盒子半透明	background：rgba（0，0，0，0.3）；

css权重计算器：

标签选择器	计算权重公式
继承或者 *	0，0，0，0
每个元素（标签选择器）	0，0，0，1
类选择器 伪类	0，0，1，0
id选择器	0，1，0，0
行内样式表	1，0，0，0
！important	无穷大

来源：oschina

链接：https://my.oschina.net/u/4454049/blog/3175566