字数
1329 字
阅读时间
6 分钟
一、基础
1.1 css简述
html
//样式引入方式
//嵌入式
<STYLE type="text/css">
css样式
</STYLE>
//外链
<link rel="stylesheet" type="text/css" href="css的路径"/>
//行内
<p style="css样式"> </p>
// 特点：对大小写、空格换行不敏感，分号很重要。1.2 css属性
text
css属性继承
可继承属性：
color、font(font-size、font-weight、font-family、font-style)、
text(text-decoration、text-align、text-indent)、list、line-height
不可继承：
background-color、float、position、margin、padding、border浮动
cssfloat：left /*清除浮动1*/ .clear { clear : both; } /*清除浮动2 对浮动的元素的父级div设置样式*/ .wrapper { overflow:hidden; zoom:1; } /* 清除浮动3 对浮动的元素的父级div添加一个clearfix的类名，添加样式*/ .clearfix:after { content: ""; display:block; height:0; clear:both; visibility:hidden; } .clearfix { zoom:1; }定位position
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。溢出overflow
visible： 默认值。内容不会被修剪，会呈现在元素框之外 hidden：内容会被修剪，并且其余内容是不可见的 scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 auto： 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
1.2 选择器
css
/*标签选择器*/
标签类型{}
/*id选择器*/
#id名称{}
/*类选择器*/
.类名{}
/*交集选择器 取同时满足多个选择器的部分*/
选择器1.选择器2{}
/*并集选择器 取满足任意一个选择器的部分*/
选择器1,选择器2{}
/*全局选择器*/
*{}
/*后代选择器 选择器2应满足时选择器1的子节点*/
选择器1 选择器2{}
/*属性选择器*/
选择器[att^=“val”] 匹配满足选择器且有属性值以val开头的任意字符串
选择器[att$=“val”] 匹配满足选择器且有属性以val结尾的任意字符串
选择器[att*=“val”] 匹配满足选择器且有其属性值任意位置包含val
/*子选择器*/
选择器1>选择器2{}
/*伪类选择器*/
选择器:root{ }匹配选择器所在文档的根元素。在HTML文档中，根元素始终是<html>。
input:not([type="submit"]){}:not选择器为否定选择器，可以选择除某个元素之外的所有元素。
选择器:empty选择器表示的是空。用来选择选择器下没有任何内容的元素
选择器:target选择器称为目标选择器，用来匹配文档(页面)的id的某个标志符的目标元素
选择器:first-child 选择器表示的是选择父元素的第一个子元素的元素
选择器:last-child 选择器选择的是元素的最后一个子元素
选择器:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，可以取整数值，也可取表达式｛2n（偶数项）2n+1（奇数项）｝
选择器:nth-last-child(n) 从父元素的最后一个子元素开始计算，来选择特定的元素。
选择器:first-of-type 定位一个父元素下的某个类型的第一个子元素。
选择器:nth-of-type(n)计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时
选择器:last-of-type 选择是父元素下的某个类型的最后一个子元素。
选择器:nth-last-of-type(n) 选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始
选择器:only-child 选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。
选择器:only-of-type 选中一个元素很多子元素中的唯一只有一种类型的子元素。
/*结构选择器 表单类型*/
:disabled”用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。
:checked 表示的是选中状态。
:read-only 伪类选择器用来指定处于只读状态元素的样式。
:read-write 选择器与“:read-only”相反，用来指定当元素处于非只读状态时的样式。
::selection 伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。
::before和::after这两个主要用来给元素的前面或后面插入内容