cssStyle | 不是第一

选择器

基本选择器

		/*通配符选择器*/		* { margin: 0; padding: 0; border: none; }
		/*元素选择器*/		body { background: #eee; }
		/*类选择器*/		.list { list-style: square; }
		/*ID选择器*/		#list { width: 500px; margin: 0 auto; }
		/*后代选择器*/		.list li { margin-top: 10px; background: #abcdef; }

基本选择器扩展

		/*子元素选择器*/		#wrap > .inner {color: pink;}
					也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素
		/*相邻兄弟选择器*/	#wrap #first + .inner {color: #f00;}
					它只会匹配紧跟着的兄弟元素
		/*通用兄弟选择器*/	#wrap #first ~ div { border: 1px solid;}
					它会匹配所有的兄弟元素(不需要紧跟)
		/*选择器分组*/		h1,h2,h3{color: pink;}  
					此处的逗号我们称之为结合符

属性选择器

    /*存在和值属性选择器*/	
        [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
        [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
        [attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。
    
    /*子串值属性选择器*/
            [attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。
            [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
            [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
            [attr*=val] : 选择attr属性的值中包含字符串val的元素。

伪类与伪元素选择器

    /*链接伪类*/		注意:link，:visited，:target是作用于链接元素的！
            :link		表示作为超链接，并指向一个未访问的地址的所有锚
            :visited	表示作为超链接，并指向一个已访问的地址的所有锚
            :target 	代表一个特殊的元素，它的id是URI的片段标识符
    /*动态伪类*/		注意:hover，:active基本可以作用于所有的元素！
            :hover		表示悬浮到元素上
            :active		表示匹配被用户激活的元素（点击按住时）
            
            由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签
            身上时 :link和:visited不能放在最后！！！
            
            隐私与:visited选择器
                只有下列的属性才能被应用到已访问链接：
                    color
                    background-color
                    border-color
    /*表单相关伪类*/
            :enabled	匹配可编辑的表单
            :disable	匹配被禁用的表单
            :checked	匹配被选中的表单
            :focus		匹配获焦的表单
            
    /*结构性伪类*/
            index的值从1开始计数！！！！
            index可以为变量n(只能是n)
            index可以为even odd
                #wrap ele:nth-child(index)		表示匹配#wrap中第index的子元素 这个子元素必须是ele
                #wrap ele:nth-of-type(index)	表示匹配#wrap中第index的ele子元素
                除此之外:nth-child和:nth-of-type有一个很重要的区别！！
                        nth-of-type以元素为中心！！！
                        
            :nth-child(index)系列			
                :first-child
                :last-child
                :nth-last-child(index)
                :only-child	(相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
            :nth-of-type(index)系列
                :first-of-type
                :last-of-type
                :nth-last-type(index)
                :only-of-type	(相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
                
            :not		
            :empty(内容必须是空的，有空格都不行，有attr没关系)
    /*伪元素*/
            ::after
            ::before
            ::firstLetter
            ::firstLine
            ::selection

伪类与伪元素选择器

链接伪类 :link :visited :target(css实现选项卡) 动态伪类 :hover :active(lvha) 表单伪类 :disabled :enabled :checked(自定义单选按钮) :focus 结构性伪类 ele:nth-child(index)ele:nth-of-type(index) 以元素为中心

区别：

nth-child找到第index个子元素这个子元素必须满足ele的规则 nth-of-type找到底index个ele子元素
nth-of-type以元素为中心注意： index可以是变量n（只能是n 0到正无穷） odd：奇数 even：偶数伪元素 ::after::before

自定义字体

@font-face

字体兼容处理网站 https://www.fontsquirrel.com/tools/webfont-generator icomoon字体图标 https://icomoon.io/#home

文本新增样式

	文本阴影
	怎么溢出显示省略号
		white-space=no-wrap
		overflow=hidden
		text-overflow=ellipsis
		包裹区域必须不能让子元素撑开


<title>基本选择器</title>
<style type="text/css">
/*通配符选择器*/
* { margin: 0; padding: 0; border: none; }
/*元素选择器*/
body { background: #eee; }
/*类选择器*/
.list { list-style: square; }
/*ID选择器*/
#list { width: 500px; margin: 0 auto; }
/*后代选择器*/
.list li { margin-top: 10px; background: #abcdef; }
/*选择器分组*/
#list,.second{background: pink;}
</style>
<!-- 子元素选择器 -->
<!--我们也可以称它为直接后代选择器-->
<style type="text/css">
#wrap > .inner {
	/*color: pink;*/
	border: 1px solid;
}
</style>
</head>
<body>
<div id="wrap">
	<div class="inner">
		wrap下一层
		<div class="inner">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最里层</div>
	</div>
	<div class="innera">wrap下一层</div>
	<div class="innear">wrap下一层</div>
	<div class="innaer">wrap下一层</div>
</div>

<style type="text/css">
ul > li:nth-child(3) {
	background: #f00;
}
/*
ul > li:nth-child(2n) {
	background: #ff0;
}
ul > li:nth-child(2n+1) {
	background: #0f0;
}
ul > li:nth-child(n+4) {
	background: #abcdef;
}
ul > li:nth-child(odd) {
	background: red;
}
ul > li:nth-child(even) {
	background: blue;
}
*/
</style>
</head>
<body>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>
<hr>
<div>0-1</div>
<div>0-2</div>
<div>0-3</div>
<hr>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>




<style type="text/css">
div {
	width: 300px;
	height: 100px;
	border: 1px solid #000;
}
/* 多行 第一行样式 */
div::first-line {
	color: #f00;
	font-weight: bold;
}
/* 选中样式   */
div::selection {
	background: red;
	color: pink;
}
/* 第一个文字 */
div::first-letter {
	color: #f00;
	font-size: 24px;
	font-weight: bold;
}

div::before {
	content: "我在内容的前面";
}

div::after {
	content: "我在内容的后面";
}
</style>
</head>
<body>
<div>---伪元素--</div>
<br>
<div>aaaaaaaaaaaaaaabbbbbbbbbbbbbbcccccccccccc</div>
<p>abcdefg</p>
<p>higklmn</p>
</body>

<!-- 风车 -->
<style>
.box{
	width:400px;
	height:400px;
	margin:50px auto; 
	transition:5s linear;
}
.box div{
	width:180px;
	height:180px;
	margin:10px;
	border:1px solid #000; 
	box-sizing:border-box;
	float:left;
	background:pink;
}
.box div:nth-child(1),.box div:nth-child(4){ 
	border-radius:0 60%;
}
.box div:nth-child(2),.box div:nth-child(3){ 
	border-radius:60% 0;
}
.box:hover{
	transform:rotate(720deg);
}
</style>
</head>
<body>
<div class="box">
	<div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

文字css 处理


.box{
	width:100px;
	height:100px;
	background:url(img/周冬雨.jpg);
	/*background-size: 100%;*/
	border:5px solid #000; 
	resize:both; 
	overflow:auto;
}
/*  
<div class="box"></div> */


/* 超出省略号 */
p{
	width:300px;
	border:1px solid #000;
	font:14px/30px "宋体";
	white-space:nowrap; 
	overflow:hidden; 
	text-overflow:ellipsis; 
}

/* 文字排版 */
p{
	width:300px;
	border:1px solid #000;
	font:14px/30px "宋体";
	direction:ltr;
	unicode-bidi:bidi-override;
}

h1{ 
	font:100px/200px "微软雅黑"; 
	color: white;
	text-align:center; 
	text-shadow:2px 2px 9px black;
}
h1{ 
		font:100px/200px "微软雅黑"; 
		text-align:center; 
		color:white;
		-webkit-text-stroke:4px pink;
	}


h1{ 
	font:100px/200px "微软雅黑"; 
	text-align:center; 
	text-shadow: -5px -10px ,5px 10px pink;
}

html打印

给打印添加分页符：两种被广泛认可的属性是page-break-before和page-break-after。 page-break-before告诉网页浏览器在一个指定样式之前插入一个分页符。利用page-break-before 属性使图片打印在一张新页面上，并且适合整张页面。要使一个元素作为打印页上的最后一个项目显示，就给那个元素的样式添加page-break-after: always。

at-rule 谷歌

盒模型新增样式

box-shadow

关键字(内外阴影)
- length(x轴的偏移量)
- length(y轴的偏移量)
- length(模糊程度)
- length(阴影面积)
- color(阴影颜色)

text-shadow
- length(x轴的偏移量)
- length(y轴的偏移量)
- length(模糊程度)
- color(阴影颜色)

背景图处理css

css2 background-color 平铺整个border-box background-image 默认从padding-box开始绘制，从border-box开始剪裁 css3中有多背景，默认绘制时尺寸是自己的位图像素 background-repeat 控制平铺与否 background-position 控制背景图片在背景区域中的位置 px 百分比参照于背景区域减去背景图片的位图像素值 background-attachment scroll：默认值，背景图不会随着元素滚动条的滚动而滚动 fixed：背景图铺在视口中固定定位了
css3 background-origin background-clip background-size 图片是自适应的

如何实现一张图片的垂直水平居中

    body:after{
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    img{
        vertical-align: middle;
    }

transition过渡

过渡 transition-property 指定过渡动画的属性（并不是所有的属性都可以动画） transition-duration 指定过渡动画的时间（0也要带单位） transition-timing-function 指定过渡动画的形式（贝塞尔） transition-delay 指定过渡动画的延迟 transition 第一个可以被解析成时间的值会赋给transition-duration transtionend事件（DOM2）在每个属性完成过渡时都会触发这个事件当属性值的列表长度不一致时跟时间有关的重复列表 transition-timing-function使用默认值
2D变换（transform） rotate 旋转 translate 平移 skew 斜切 scale 缩放变换组合! 顺序是从右往左的，变换的底层其实就是矩阵的运算基点的变换 transform-origin

# 选择器

# 伪类与伪元素选择器

# 自定义字体

# 文本新增样式

# 文字css 处理

# html打印

# 盒模型新增样式

# 背景图处理css

# 如何实现一张图片的垂直水平居中

# transition过渡

选择器