2、前端学习笔记之——css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS-learning-note</title>
<style type="text/css">
h1{color:red}
p{font-size:20px;color:blue;font-family:"华文行楷",serif;font-weight:600;}
.p1{font-family:"Times New Roman","华文行楷",serif;}
.p2{font:italic bold 30px "Times New Roman";}
.p3{text-align:center;}
.p4{text-indent:2em;}
.p5{
/*color:red;*/
/*color:rgb(255,0,0);*/
/*color:rgba(255,0,0,1);*/
/*color:#FF0000;*/
/*color:#F00;*/
color:rgb(100,100,100);
}
.a1{text-decoration:none;} #identity1{color:red;}
#identity2{color:blue;}
#identity3{color:green;}
#identity4{color:yellow;} .p1{color:red;}
.p2{color:blue;}
.p3{color:green;}
.p4{color:yellow;} .colorR{color:red;}
.size30{font-size:30px;}
.size20{font-size:20px;}
.line{text-decoration:underline;} div>ul>li>p{color:red;} img[alt|=abc]{color:red;}
img[alt$=abc]{color:yellow;}
img[alt*=q]{color:green;} *{
color:green;
}
.staff{width:400px;height:240px}
.icon{background-image:url(weibo.png);width:88px;height:31px;background-position:-424px -199px;} </style> </head>
<body> <!--前瞻：CSS：Cascading StyleSheet 层叠式样式表-->
<!--1、CSS的标准格式-->
<!--<style>
标签名称{
属性名称:属性对应的值;
...
}
</style>
-->
<!--该标准格式中，style里面的格式就是key:value;记住冒号不能省略-->
<!--CSS都会写在<head></head>之间-->
<!--1.1、第一个CSS超文本-->
<!--1.2、style标签有个属性：type，主要用于告诉浏览器这个style标签是什么：<style type="text/css">
意思就是说style标签存储的是文本类型的css代码-->
<!--1.3、<style type="text/css">这句可写可不写，因为系统默认就是这一句，写上会规范一些-->
<h1>我是标题</h1>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p> <!--2.1、文字相关属性-->
<!--1、font-style：normal正常的,默认就是正常的
italic倾斜的
2、font-weight:bold;加粗
bolder;比加粗还粗
lighter;细线，默认是细线
3、font-size:30px;设置字体大小为30像素
4、font-family:"华文行楷";设置字体的文字字体，
有两个注意点：1、如果取值是中文，需要用双/单引号括起来
2、设置的字体必须是电脑已经安装的，不然没有效果，也可以用字体包
-->
<!--无论是什么类型的标签，只要有表示大小的，或是颜色的（颜色要加#），都可以加数值来作为属性值，比如设置
字体粗细的font-weight属性，也可以这样表示：font-weight:100;-->
<!--2.2、文字相关属性补充-->
<!--2.2.1、两个新问题：1、如果当电脑没有相关字体，且我们不要用系统默认的，怎么办呢？
解决：可以给字体设置备选方案
格式：font-family:"原方案"，"备选方案1","备选方案2"...;
2、如果同一标签，比如p标签里面前一部分用这种字体，后一种用另一种字体，怎么办？
解决：首先要明白，但凡是中文字体，里面都包含英文字体；
但凡是英文字体，里面都不包含中文字体；
所以：也是一样的，用备选方案，但需要注意的是英文字体需放中文字体前面。-->
<!--2.2.2、相关练习-->
<em>我是文字</em>
<p>我是段落</p>
<p class="p1">abc我是陈铎鑫</p>
<!--2.3、字体属性小结
font:style,weight,size,family;最好就一直沿用该方式
注意点：1、size,family不能省略
2、size一定要在family前面
3、size和family一定要放在font属性的最后
4、根据前面的几个特性，备选方案的字体设置方式也就不能用了-->
<p class="p2">abc我是陈铎鑫</p> <!--3、文本属性-->
<!--3.1、具体的：1、文本装饰属性text-decoration:underline;下划线
line-through;删除线，跟del一样的效果
overline;上划线
none：什么都没有，最常见的作用就是去掉超链接的下划线
2、水平对齐属性text-align:left;左对齐 默认值是left
center;居中
right;右对齐
3、文本缩进属性text-indent:2em;缩近两个文字的距离
-->
<!--3.2、文本装饰属性-->
<a class="a1" href="javascript:">a标签1</a>
<!--3.3、文本对齐属性-->
<p class="p3">我是陈铎鑫</p>
<!--3.4、文本缩近属性-->
<p class="p4">陈伪娘，原名陈炜明，因其娘的特性，故亦有小名伪娘，广工的屌丝一枚，自2016年大光棍校毕业后，于花果山进修一年有余，
后经同事介绍到了无名海，随着伟大神的到来，无名海掀起了波澜巨浪，导致狂风18级，无名海深处水深火热之中，大神不亏是大神，
目前屈居于无名海某个小角落，郁郁寡欢不得志，欲往大城市发展。</p> <!--4、颜色属性-->
<!--通过color来设置：color:red;常见的一些颜色会有对应的英文单词对应
rgb(255,0,0);里面分别代表红绿蓝，也就是RGB，而数值呢，可以看成红绿蓝3颗灯珠的亮度。
rgba(255,0,0,1);跟rgb不同的是，它多了个透明度，取值是0~1，数值越小，越透明
#FF0000;16进制，与rgb是一样的，只不过其是每两位对应rgb的三原色每个颜色的数值
#F00;CSS简写的方式，当每种颜色对应的两个位数值一致时，可以用一个数值表示-->
<!--注意web storm提供了取色器，数值多少其实不用管，很多软件都会有给你弄好的-->
<p class="p5">我是陈铎鑫</p> <!--5、标签选择器-->
<!--5.1、是什么，又有何作用？
标签选择器其实就是根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性-->
<!--5.2、注意：1、标签选择器选到的是当前界面下的所有标签，而不是其中一个
2、标签选择器无论标签藏得有多深都能被选中
3、只要是html中有的标签都可以作为标签选择器(h,p,hr,a,img,ul,ol,dl,li,tr,td,input...-->
<p>标签选择器</p>
<p>标签选择器</p>
<p>标签选择器</p>
<p>标签选择器</p>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<p>标签选择器</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<!--6、id选择器-->
<!--6.1、格式：
#id{
属性:属性值;
...
}
-->
<!--6.2、在企业开发中一般情况下如果仅仅是为了设置样式，我们不会使用id，因为id是留给js使用的，不能随便乱用id-->
<p id="identity1">id选择器</p>
<p id="identity2">id选择器</p>
<p id="identity3">id选择器</p>
<p id="identity4">id选择器</p> <!--7、类选择器-->
<!--7.1、前面学到id我们感觉作用非常大，因为它赋予了每个标签独一无二的一个身份，使每个标签都成为极具个性的个体
但是呢，id选择器更多的是给javascript用的，仅仅用于设置样式会很浪费，但个性化又是一定要的，是刚需，那
怎么均衡这个问题呢？这样类选择器就诞生了。
-->
<!--格式：
.类名{
属性:属性值;
...
}
其实类与id非常像，但注意到id是“#”，而类是“.”。
-->
<hr />
<p class="p1">类选择器</p>
<p class="p2">类选择器</p>
<p class="p3">类选择器</p>
<p class="p4">类选择器</p> <!--7.2、另一种格式：这种写法就是典型的活字印刷术了，你不必设置过多的类名，当它有很多属性时，把各个类的属性
重新拿来拼凑，你会发现这种做法真的非常的cool-->
<hr />
<p class="p11 p12">当一个标签有多种属性时，可以这样写</p>
<hr />
<ul>
<li><a href src="html5-learning-note.html">个人简介</a></li>
</ul> <!--7.3、id选择器与类选择器的区别-->
<!--区别1、id选择器相当于人的身份证，不可以重复，而class相当于人的名称，可以重复
2、一个html标签只能绑定一个id，而class可以多个，格式是class="属性1，属性2，..."
不能是class="" class=""
3、id选择器以“#”开头，类选择器以“.”开头
4、在企业开发中，id选择器一般是给javascript开发使用的，css就用的话是杀鸡用牛刀，所以最好不用id，用class
5、在企业开发中，对类的使用可以看出开发人员的水平-->
<p class="colorR size30">第一行</p>
<p class="line size30">第二行</p>
<p class="colorR size20 line">第三行</p> <!--8、后代选择器-->
<!--8.1、后代选择器：找到指定标签的所有特定的后代标签，设置属性
最大的作用：当某个嵌套盒子或是标签里存在有上万个标签，当这些标签都需要修改或设置的时候，
用class或是id需要一个个区设置，会很累，效率也低，而后代选择器就是为了解决这个
而诞生的。-->
<!--8.2、后代选择器需要用空格隔开，后代不仅仅是儿子，还有孙子/重孙，比如div p a img{}，img就是后代-->
<p>我是后代选择器</p>
<div>
<p>我是后代选择器</p>
<p>我是后代选择器</p>
</div>
<p>我是后代选择器</p> <!--9、子元素选择器：找到指定标签中所有特定的直接子元素，设置属性--> <!--9.1、格式：
标签名称1>标签名称2{
属性:值;
}-->
<!--9.2、子元素选择器最关键的就是“>”符号了，也是与后代选择器最大的区别，子元素选择器只能选择儿子，不能选择孙子
但他可以通过找了儿子后再让儿子去找儿子的儿子，也就是孙子，一级一级传递选择下去-->
<p>我是子元素选择器</p>
<div>
<p>我是子元素选择器</p>
<p>我是子元素选择器</p>
<ul>
<li>
<p>我是子元素选择器</p>
</li>
</ul>
</div>
<p>我是子元素选择器</p> <!--10、其他选择器-->
<!--10.1、交集选择器：标签与标签之间的符号
格式：与id有“#”，class有“.”不同，它没有间隔符号
企业开发中一般不用，因为交集选择器功能与直接设置类名或id名重复--> <!--10.2、并集选择器：简化操作，核心使用连接符为：“,”，也就是逗号--> <!--10.3、相邻兄弟选择器（CSS2）：给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式:选择器1+选择器2{
属性:属性值;
}-->
<!--10.4、通用兄弟选择器(CSS3)：与相邻兄弟选择器区别的是，前者是仅仅选中相邻的那一个，后者是选中该标签后的
所有标签，需要注意的是只要先出现了选择器1，后面出现的选择器2都会被选到，不
管中间是否有被隔开
格式:选择器1~选择器2{
属性:属性值;
}--> <!--10.5、序选择器:CSS3最具代表性的就是序选择器，它可以选择同级别或是同类型的标签，有10个标签-->
<!--10.5.1、这10个标签其实就代表，同级别的第几个
1、:first-child:选中同级别的第1个，不区分类型；可能取到的是h标签，如果设置的是p标签属性，可能就无效
2、:first-of-type:选中同级别同类型的第1个
3、:last-child:选中同级别的最后1个，同样不区分类型
4、:last-of-type:选中同级别同类型的最后1个
5、:nth-child(3):同级别中的第3个，里面也可以改成任意数字，代表同级别那个数字对应的标签
6、:nth-of-type(3):其实都很类似，这个是同级别同类型的第3个
7、:nth-last-child(2)：同类型倒数第2个，不区分类型
8、:nth-last-of-type(2):看文字就懂了，同类型倒数第2个 9、:only-child:选中父元素中唯一的元素，父类里记住必须只有1个标签，另外它不区分类型
10、:only-of-type:选择父元素中唯一的元素，父类里记住必须只有1个同类型的标签。
-->
<h3>我是序选择器0</h3>
<p>我是序选择器1</p>
<p>我是序选择器2</p>
<p>我是序选择器3</p>
<p>我是序选择器4</p>
<div>
<p>我是序选择器1</p>
<p>我是序选择器2</p>
<p>我是序选择器3</p>
<p>我是序选择器4</p>
<p>我是序选择器5</p>
</div> <!--10.6、属性选择器：了解了这么多选择器，其实他们是有很多共同点的，属性选择器也是，只不过它用了中括号[]来表示而已
两种表示形式：1、[attribute]{}：找到有该属性的标签
2、[attribute-value]{}：找到有该属性里有该属性值的标签
-->
<!--举例：input[type]{}
input[type=radio/password/name/text/checkbox...]{}
后面大括号内容跟正常的CSS设置一样，属性:属性值；
-->
<!--10.6.2、其他属性选择器：
属性的取值是以什么开头的？
1、[attribute|=value]；CSS2,有局限,只能找到以“-”和其他内容隔开的，如下文的abc-www
2、[attribute^=value]：CSS3,只要是以abc开头的都可以被找到,abc_def,abc-www,abc ppp都可以
属性的取值是以什么结尾的？
3、[attribute$=value]：CSS3
属性的取值是否包含某个特定的值的？
4、[attribute~=value]：CSS2,只能找到被空格隔开，单独存在的value
5、[attribute*=value]：CSS3：只要包含value就可以找到
-->
<img src="" alt="abc_def">
<img src="" alt="abc-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
<img src="" alt="qq">
<img src="" alt="yy"> <!--10.7、通配符选择器：带有*号的选择器-->
<!--由于通配符选择器实际上是给界面上所有的标签一个通用的属性，所以它需要访问所有的标签，当界面上的标签很多时，
通配符的加入会带来不必要的资源浪费，也让浏览器的加载变得缓慢-->
<!--针对这个需求和这个缺陷，后面会有相应的解决办法-->
<h1>我是标题</h1>
<p>我是段落</p>
<a href="#">我是超链接</a> <!--11、CSS三大特性-->
<!--11.1、CSS三大特性之——继承性-->
<!--11.1.1、什么是继承性？给父元素设置一些属性，子元素也能用-->
<!--11.1.2、注意点：1、并不是所有的属性都可以继承
只有以color/font-/text-/line开头的属性才可以继承
2、在CSS中，属性的继承不仅仅是子元素可以，后代都可以，也就是除了儿子，孙子/重孙都可以继承
3、继承性中的特殊性：①、a标签的文字颜色和下划线是不能继承的，但大小等等都可以
②、h标签的文字大小是不能继承的
其实为何有这两个特殊性很好理解，因为父元素是类似于通配符那样，只要是父元素的后代，都贴上了
父元素的标签，父元素的特性，但无论是h标签的大小，或是a标签的下划线跟蓝色的文字颜色是它自己
的特性，它的优先级更高，会把父元素这些通用的属性覆盖掉，只会继承其他的属性。
-->
<!--11.1.3、在企业级开发中，一般用于设置网页的一些共性信息，例如网页的文字颜色，字体，文字大小等内容，减少代码
重复性，精简代码--> <!--11.2、CSS三大特性之——层叠性-->
<!--11.2.1、层叠性是CSS处理冲突的一种能力，层叠性只有在多个选择器选中“同一个标签”，然后又设置了同一个属性，
才会发生层叠性--> <!--11.3、CSS三大特性之——优先级-->
<!--11.3.1、前面讲到CSS其实就是一个层叠样式表，层叠是它的特性，也是它的核心，但怎么层叠呢？谁层叠谁？怎么层叠？
这就是要讲的CSS最后一个特性——优先级
优先级有3种：1、是否是直接选中（间接选中就是指继承）
如果是间接选中，那么谁目标标签越近，目标标签的属性就跟谁谁
2、是否是相同选择器
如果都是直接选中，且都是同类型的选择器，那么谁写后面就听谁的
3、不同选择器
如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠 选择器优先级排列：id>class>标签>通配符>继承>浏览器默认
--> <!--11.3.2、优先级之提升：important，作用很简单，用于提升某个直接选中标签的选择器中的某个属性的优先级，可以将被
指定的属性优先级提升至最高，比id属性还高
具体是这样的：
p{
color:red;!important;
}
-->
<!--11.3.2.1、important需要注意的是，只能用于直接选中的选择器里，注意通配符以上包括通配符都属于直接选中的选择器。
！important只能提升被指定的对象的优先级，其他属性的优先级不会被提升，
！important中的!不能省略
！important必须写在";"，即分号前面--> <!--11.3.3、优先级之权重问题-->
<!--当多个选择器混合一起使用时，我们可以通过计算权重来判断谁的优先级最高
权重计算规则：1、首先计算选择器有多少个id，id多的选择器优先级最高
2、其次当id选择器数量一致时，看类选择器，接下来再看标签
3、标签之后就随意了，哪个的代码写在后面，优先级最高
可能做面试题会考到，但实际开发自然而然就会懂的--> <!--12、div和span：这两个其实是属于html的标签，不过这两个和css关系较为密切，没有css一定的基础不好理解，所以现在再
来讲。这两个最大的作用其实就是用于网页的基本布局了-->
<!--12.1、div是容器级标签，span是文本级标签
容器级标签：h,ul,ol,dl,li,div...它可以嵌套所有标签
文本级标签: span,p,buis strong em ins del...它只能嵌套文字/超链接/图片
-->
<span></span>
<!--12.2、块级元素和行内元素
块级元素：h,div,ol,ul,dl,li,p...所有容器级标签都是块级元素
行内元素：span,buis,strong,em,ins,del...文本级标签中除了p标签其他都是行内元素
这两者最大的区别就是是否独占1行，块级元素会独占1行
另一个区别就是行内元素不可以设置宽高度，而块级元素可以--> <!--12.2.1、行内块级元素：为了能既不占一行，又能设置宽高，就诞生了行内块级元素-->
<img class="staff" src="职工.jpg" alt=""> <!--13.1、背景图片:background-image:url(image.jpg)
1、如果图片的大小没有标签的大，会自动复制平铺
2、图片可以是本地的图片地址，也可以是网络上的图片地址
3、如果网页上出现图片，浏览器会再次发送请求获取图片--> <!--13.2、背景平铺属性：background-repeat:repeat/repeat-y/repeat-x/no-repeat-->
<!--可以通过背景平铺来降低图片大小，提升网页加载效率-->
<!--background：1、background-repeat:repeat/repeat-y/repeat-x/no-repeat;
2、background-position:水平 垂直;（均有3个值left/center/right top/center/bottom，还可以设置数值）
这个position有个很重要的作用，由于对于世界上很多的用户来说，它们有着不同分辨率，各种尺寸的
电脑，所以网页的背景图设计尤为谨慎，一般情况下UI或是前端开发都会先制作一张很大很长的图，避免因显
示不完全从而影响用户体验，但过大的图对于一些小尺寸电脑会显示不完全，所以通过position设置成center
的方式可以让重要的内容居中，完美兼容各型尺寸终端。 3、background-image:url(本地图片地址/网页图片地址)
4、background-color:背景颜色
5、background-attachment:scroll（默认跟随）/fixed（固定）;
默认情况下，背景图片会随着滚动条的滚动而滚动，
--> <!--13.2.1：背景格式缩写的方式：
background:背景颜色 背景图片 平铺方式 关联方式 定位方式-->
<!--改背景格式可以省略任何一个属性--> <!--13.2.2：背景图片和插入图片区别：1、背景图片不占用位置，文字/文本/超链接等可以显示在上面，而插入图片不行
2、背景图片可以很方便的定位，而插入图片不行
3、插入图片有一个好处：就是语义强，容易被搜索引擎收录，在企业开发中有益处
-->
<!--13.3、CSS精灵图：是一种图像合成技术。需要配合背景图片和背景定位-->
<div class="icon"></div> <!--14、边框属性：边框就是环绕在标签四周的线条，故而只要是标签，都可以设置边框
14.1、同时设置4条边框：border，格式：border:1px solid blue;
14.2、分别设置4条边框：上：border-top
下：border-bottom
左：border-left
右：border-right-->
<!--注意点：连写格式中，边框线条宽度，线条颜色均可以省略，会呈现默认值，但样式不能省略，省略样式边框会看不到-->
<!--样式是什么呢？就是上面的solid，也就是实线，除此之外还有虚线dashed，点缀dotted...（可查询手册）--> <!--14.3、边框属性其他属性-->
<!--分别设置4条边的边框属性：border-width:上右下左
border-style:上右下左
border-color:上右下左
可省略其中某些值，省略的值对于的边属性跟随其对边，即左右或上下，当只写了一个属性时，
其他边的属性就跟随有定义的那条边。
为什么是上右下左？其实就是按照顺时针的方向并且以上为起点来设置-->
<!--此外还有border-top-width,border-top-style...很累，也很无语，也很重复浪费无奈，实在没办法，很烦--> <!--15、内边距-->
<!--用的关键词：padding，格式跟border完全一样--> <!--16、外边距-->
<!--用的关键词：margin，格式跟border完全一样-->
<!--在默认布局的垂直方向上，外边距是不会叠加的，会出现合并现象，比如两个div，其设置的外边距为20px，10px，10px会被
覆盖掉，听20px也就是外边距比较大的那个--> <!--17.1、CSS盒子模型：所有的html标签其实都是盒子模型-->
<!--宽度/高度：指定可以存放内容的区域
内边距：填充物
边框：手机盒子自己
外边距：盒子与盒子之间的间隙--> <!--17.2、盒子模型宽度和高度-->
<!--1、内容宽高：通过标签width/height设置的就是内容宽高
2、元素的宽度和高度：宽度=左边框+左内边距+width+右内边距+有边框
3、元素空间的宽度和高度：宽度=左外边距+左边框+左内边距+width+右内边距+有边框+右外边距--> <!--17.3、盒子居中和内容居中：盒子居中:margin:0 auto;
内容居中;text-align:center;--> <!--18、清空默认边距-->
<!--1、用通配符*直接设置margin和padding属性即可：但它会遍历所有的标签，性能不是很好--> <!--19、盒子浮动：盒子浮动是很强大的功能，但有个非常重要的注意点就是当这个盒子div下方还有一个div时，
这个盒子最好不要设置浮动，如果实在需要需要设置，可以先在在外面框一个大边框，再在
里面的边框设置浮动，也就是说，浮动的设置最好前提是一行，不要多行--> <!--19.1、浮动清除方式。1、给父类元素设置高度
2、clear;left/both/right/none/inherit;用clear清除浮动，其中both是指左右两侧均不允许浮动
3、隔墙法：①外墙法：即在两个设置浮动的标签中间添加一个块级元素，div即可同时把该div进行
clear:both清除浮动，同时由于清除属性，margin外边距会失效，无法设置，
此时可通过设置该div的高度保证两个标签之间的空隙
②内墙法：隔离的一种方式，跟外墙法没区别，只不过是添加到两个浮动标签其中一个
里面，记得添加在第1个标签的最后或是第2个标签的最前
-->
<!--19.2、伪元素选择器：就是在标签的前后快捷的添加子元素-->
<!--div::before{content:"爱你"} 这个元素直接设置宽高没效果，需要加上显示display:block(意思是添加的子元素为
块级元素);
div::after{content:"我爱你"}-->
<!--格式：标签名称::before{
属性:属性值;
}-->
<!--标签名称::after
属性:属性值;
}-->-->
<!--伪元素有个很好的东西，就是可以隐藏：通过visibility:hidden;-->
<!--*zoom:1;可以帮助IE6里面兼容浮动问题--> <!--20、其他几个属性小结-->
<!--20.1、overflow:hidden作用:当内容超过div时，如果不想要超出的内容显示，就可以把超过的部分隐藏起来-->
<!--20.1.1、overflow:hidden既然有这个作用，那么清除浮动的时候是不是也可以用呢？毕竟浮动的那些是另外的div带来的。
答案是肯定的，呵呵，不过这个方式在IE6中无效，因为它也不兼容。当然也可以加*zoom:1;来解决兼容
-->
<!--20.1.2、overflow:hidden还有一个很重要的作用，就是当嵌套的盒子里面要设置里面的盒子与外面盒子的边距时，
直接在里面的盒子用margin-top是无效的，为什么无效呢，因为父元素未设置的部分会跟随子元素
的设置一起变动,当加入overflow:hidden;就OK了，为什么呢？还是它作用的延伸，因为它会清除
掉超过的内容，所以父元素多余的设置全部被清除，框架框死了。
当然要实现上面的结果也可以通过padding，但padding有个不好的就是，父元素的外边宽会被顶大，
也就是当一个界面布局固定时，padding的设置可能会加大这类的样式混乱，且不利于修改维护。
--> </body>
</html>
2、前端学习笔记之——css的更多相关文章
- 前端学习笔记之CSS选择器
阅读目录 一 基本选择器 二 后代选择器.子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器 ...
- 前端学习笔记之CSS网页布局
CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...
- 前端学习笔记之CSS属性设置
CSS属性设置 阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...
- 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理
在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...
- 前端学习笔记之CSS浮动浅析
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 前端学习笔记之CSS过渡模块
阅读目录 一 伪类选择器复习 二 过渡模块的基本使用 三 控制过渡的速度transition-timing-function 四 过渡模块连写 一 伪类选择器复习 注意点: #1 a标签的伪类选择器可 ...
- 前端学习笔记之CSS介绍
阅读目录 一 什么是CSS 二 为何要用CSS 三 如何使用CSS 一 什么是CSS CSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的. 样式指的是H ...
- 前端学习笔记之CSS文档流
先引用一段W3C的文档: 9.3 Positioning schemes In CSS 2.1, a box may be laid out according to three positionin ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
随机推荐
- VMware中安装系统提示没有可用的映像(No image available)
今天新建了个虚机在装系统的时候提示"没有可用的映像" 之所以会出现这种情况是因为在新建虚机的时候选择的设置不同导致的,此处不管选第一项还是第二项都会虚机设置中多了一个软盘的配置项, ...
- 深入解析Linux中的fork函数
1.定义 #include <unistd.h> #include<sys/types.h> pid_t fork( void ); pid_t 是一个宏定义,其实质是int, ...
- Html5的学习之旅-Html5的web Storage概述（16）
在html5中除了canvas,另外一个非常重要的功能是客户端本地存储web storage,之前可以在用户端Cookies存贮用户名等信息,后来发现Cookies存储存在以下问题: 大小:Cooki ...
- mysql进阶(三)游标简易教程
mysql游标简易教程 从mysql V5.5开始,进行了一次大的改变,就是将InnoDB作为默认的存储引擎.InnoDB支持事务,而且拥有相关的RDBMS特性:ACID事务支持,数据完整性(支持外键 ...
- Android Widget 开发详解(二) +支持listView滑动的widget
转载请标明出处:http://blog.csdn.net/sk719887916/article/details/47027263 不少开发项目中都会有widget功能,别小瞧了它,他也是androi ...
- 【算法导论】图的广度优先搜索遍历（BFS）
图的存储方法:邻接矩阵.邻接表 例如:有一个图如下所示(该图也作为程序的实例): 则上图用邻接矩阵可以表示为: 用邻接表可以表示如下: 邻接矩阵可以很容易的用二维数组表示,下面主要看看怎样构成邻接表: ...
- 【测试】Gunicorn , uWSGI同步异步测试以及应用场景总结
最近使用uwsgi出了一些问题,于是测试下Gunicorn测试对比下 环境 一颗cpu 1g内存 Centos系统 Django作为后端应用,Gunicorn默认模式和异步模式,响应基本是无阻塞类型 ...
- android cookie持久化
原博客地址:http://blog.csdn.net/shimiso/article/details/39033353 在解析网页信息的时候,需要登录后才能访问,所以使用httpclient模拟登录, ...
- mysql-proxy中的admin-lua-script
[root@ecs-7b55 lua]# cat admin.lua --[[ $%BEGINLICENSE%$ Copyright (c) 2008, 2012, Oracle and/or its ...
- MOOS学习笔记4——独立线程不同回调
MOOS学习笔记4--独立线程不同回调 /** * @fn 独立线程不同回调 * @version v1.0 * @author */ #include "MOOS/libMOOS/Comm ...