WEB前端开发基础学习-css
image.png
CSS是必须以HTML文档标签为基础，如果没有HTML的标签就更谈不上CSS了。现在CSS最新的版本是CSS3.0，但是版本的兼容性不是特别好，包括IE8对CSS3支持的也不是特别好，但是到了IE9开始，CSS3就支持的相对好一点了。所以我们要使用CSS2.1的标准去开发CSS3.0的样式表单。
下面我们先打开一个普通的网页
image.png
然后我们审查他的HTML元素
InkedQQ图片20180103145700_LI.jpg
head中的红线部分就是引入CSS样式的标签。我们尝试着将他删除掉，再去查看该网页：
image.png
我们可以看到当把CSS元素删除掉之后整个页面就没有了相关的样式和布局，失去了美感。这样我们就大致了解了HTML和CSS的关系：
image.png
image.png
CSS中只有一种注释/* */。
引入CSS的方式：
1 所有的标签都有一个默认的样式，我们称之为浏览器样式，或者默认样式。
2行内样式：
行内样式是通过在标签中设置style属性来达到实现控制标签的样式的效果。
例如：<h1 style="color: red; font-size: 12px;">CSS</h1>
CSS字体就会在浏览器中显示为红色，12像素的大小。
即style属性中可以设置多条的CSS样式。
3内嵌（嵌入，内部）样式：
在head标签中添加一个style标签，标签中有一个type属性，默认值就是text/css，可以省略。
<style type="text/css">
p {
}
ul{
}
</style>。
image.png
image.png
color：前景色
background-color：背景色
4外部样式，外联样式。（link）（最常见）
通过link标签把CSS文件引入到HTML页面中来。
<link rel="stylesheet> href="CSS/main.css">
rel是relation关系的意思，link样式表单与当前页面的关系是stylesheet样式表。
href指向html文件根目录下CSS文件夹中的mian.css文件。
image.png
就在main.css文件中直接输入a{color：yellow}
image.png
image.png
网页中的a标签内容就会变成黄色。
注意：
使用外部样式可以很容易把我们在HTML页面当中的样式挪到一个单独的CSS文件里面去，非常容易进行管理，还可以达到不同页面共用一个CSS文件。
5导入样式（不推荐使用）
image.png
还可以在css文件中用@import url（文件地址）进行导入CSS文件。
例如：
image.png
image.png
image.png
这样a标签的前景色变成了黄色，背景色变成了蓝色。
CSS的基本语法：
image.png
有多条CSS声明时，建议分开到多行中去写，不要挤到一行，最好一行中只写一条CSS声明。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
通配符选择器：
*{
}
*代表选择当前页面中的所有标签，也就是括号中的属性会应用到所有标签中。
而且通配符的穿透力很强，优先级高于继承的样式，会覆盖继承的样式。一般不用。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
ID选择器：
ID选择器是可以帮助我们选择当前页面中唯一id值的标签，根据标签的ID属性值进行选取设置样式。 ID选择器的符号是#号。
image.png
HTML标签中ID的属性值在一个页面中必须是唯一的。
ID的命名不是随便取的，有一定的规范：
1只允许出现字母（大小写均可，严格区分）、下划线、数字。也就是说id=“laohe”和id=“laoHe”不冲突。
2只允许以字母开头
3命名没有长度限制，可以是一个字母，也可以是多个。不过不建议太长。
4不允许出现标签名。（不是硬性规定）
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
类选择器：
类选择器，是对HTML标签中class属性进行选择。CSS类选择器的选择符是"."。
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
ID选择器和类选择器的区别：
1、相同的class属性值，可以在HTML中出现多次，而ID属性值在页面中只能出现一次。
2、一个class的属性可以有多个值，也就是说一个标签可以有多个class类。
建议尽量使用类选择器。
使用ID的情况：当确实能唯一确定当前页面中标签只会出现一次，这时候可以使用ID选择器。
如果不能保证相同作用的标签在页面中只出现一次，那么这时候就选择使用类选择器。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
复合选择器之标签指定式选择器：
image.png
h3.class{} 该选择器只会对含有该class的h3标签起作用，而对h3标签和其他只含有该class属性的标签不起作用。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
后代选择器：.class h3
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
image.png
先找到.box对应的标签，然后找到它的后代当中所有的li标签。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
复合选择器之并集选择器：.class,h3
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器，class类选择器，id选择器等），都可以作为并集选择器 的一部分。如果某些选择器定义的样式完全相同，或者部分相同，就可以利用并集选择器为他们定义相同的css样式。
也就是说只要是满足这个类或者h3标签的，都可以享受这个CSS设置的声明。
image.png
上下两种CSS声明是一样的。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
复合选择器之子元素选择器：
子代选择器：是让css选择器智能选择儿子辈的元素。
例如：h1>strong{color:red;}
解读为:选择器h1>strong可以解释为“选择作为h1元素子元素的所有strong元素”。尖括号和选择器之间可以有空格也可以没有，没有限制。
建议：选择器和尖括号之间有空格。
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
属性选择器：
把拥有id属性的h1标签选择出来：
image.png
把拥有id属性和class属性的h1标题选出来，把含有type=“text”属性的input标签选出来：
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS伪类选择器：
:link
伪类将应用于未被访问过的链接。IE6不兼容，解决此问题，直接用a标签。
:hover
伪类将应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连接。IE7+所有元素都兼容。
:active
伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。
:visited
伪类将应用于已经访问过的链接。
:focus
伪类将应用于拥有键盘输入焦点的元素。
image.png
打开网页后，未被访问过的链接会变成red色，
被访问过的链接会变成purple，
当鼠标悬停在连接上的时候背景色会变成silver，前景色变成white，
当鼠标点击一个链接的时候该链接会变成黄色。
LoVe HAte顺序原则：CSS有一个层叠的特性，如果不按顺序 可能会出现混乱。
image.png
focus就是对获得焦点的链接产生的效果，Tab可以切换焦点的位置。
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS层叠性：（层叠性是指在样式的优先级相同的情况下才会考虑）
标签显示的颜色是最后一次被设定的颜色。
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS继承性：
当我给div设置样式的时候，作为孩子的p标签中的字体也受父容器中设置字体样式的影响。
image.png
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS的优先级：（层叠性是指在样式的优先级相同的情况下才会考虑）
image.png
优先级：行内样式>id选择器>类选择器>标签选择器。
例如：文字显示为id选择器的属性绿色，而不是类选择器的红色。
image.png
结论1：继承的样式要大于默认的样式。
结论2：通配符选择器的样式的优先级比继承样式的优先级要高。
结论3：标签的选择器的优先级要高于通配符选择器的优先级。
结论4：类选择器的样式的优先级要高于标签选择器的样式的优先级。
结论5：id选择器的优先级要高于类选择器的优先级。
结论6：行内样式的选择器的优先级高于id选择器的优先级。
image.png
当含有多种样式时，含有最高优先级样式的越多就显示该样式。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS设置标签模式display属性：
image.png
例如：通过display属性可以使块级元素变成行内模式的标签：
image.png
通过设置display为none，可以让整个标签在页面中被移除掉，不影响页面布局。
image.png
inline-block设置的宽高可以影响行高：
image.png
行内元素是不能设置宽高的只能通过它的内容来撑开它的宽度和高度，如果你设置了宽高是不会影响行内元素的显示的。
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS的颜色的表示：
image.png
十进制：rgb（X,X,X）
十六进制：#XXX
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS的长度单位：
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS设置字体大小：
image.png
相对大小是取决于你所使用设备的屏幕分辨率决定的，
而绝对大小是现实中多大在屏幕中就显示多大。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
font-family设置字体类型：
image.png
英文字体不需要加双引号，但是字体的类型名字是英文单词而且英文单词中间有多个单词组成，中间有空格的时候要加双引号。
image.png
escape（）使用例子如下：
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
fonst-weight设置字体的粗细：
image.png
normal：正常不加粗
bold：加粗
bolder：更粗
lighter：更细
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
fonst-style设置字体的样式：
image.png
后两种效果基本相同，前者是字体本身有斜体的样式倾斜体，使用它斜体的样式来显示文字。
后者即使字体中没有斜体的样式它也会进行字体倾斜一定的角度。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
image.png
CSS字体综合案例:
image.png
结果如下：
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
设置字符的间距和文字的间距：
字间距：letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。
image.png
image.png
单词间距：word-spacing属性用于定义英文单词之间的间距，对中文字符之间的间距没有任何影响。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
image.png
image.png
如果中文字之间有空格的话，会把这个空格设置成英文单词之间的间距宽度。－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
image.png
image.png
text-align: center;居中
text-align: right;右对齐
text-align: left;左对齐
text-decoration: none;去掉下划线
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
image.png
行高：上一行文字的底线和下一行文字的顶线之间的距离叫做行距，上面一半的行距归上面的文字，下面一半的行距归下面。行高就是文字的高度加上上面的一半行距再加上下面的一半行距。
CSS定义的行高：两行文本之间的基线的距离。
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
image.png
font：字体文本大小/行高
1.5em=1.5倍的文字大小。
标签属性如果不设置行高，字体默认紧贴行上部显示。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
text-decoation：文本装饰
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
text-indent：首行缩进
text-indent属性用于设置段落首行文本的缩进，只能设置块级标签。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议用em作为设置单位。
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
white-space设置文本不换行控制
image.png
normal：遇到边界自动换行
nowrap：不管文本有多长它都会继续往后放，直到遇到换行符。
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
word-break设置单词自动换行
image.png
break-all：打断单词换行，充分利用页面空间
keep-all：只有在遇到空格或者换行符出换行
normal：正常换行，不会打断单词的显示
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS盒模型
页面当中任何一个东西都是一个矩形盒子组成的，而网页就是由N多个盒子组成的。
image.png
盒子:边框+内边距+内容区域+外边距组成。
内边距：盒子的边框到内容区域边框的距离。
外边距：盒子与盒子边框之间的距离。
image.png
内容区域通过content设置，
内边距通过padding设置，
边框通过border设置，
外边距通过margin设置。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS盒模型的边框border设置详解:
image.png
效果如下：
image.png
边框样式：border-style：单实线solid 、虚线dashed、点线dotted、双实线double。
去掉图片的默认的边框，兼容性最好的写法。（在某些老的浏览器中图片是默认又边框的）
border：0 none。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS内边距padding的使用：
上内边距：padding-top
右内边距：padding-right
下内边距：padding-bottom
左内边距：padding-left
padding属性合写：
image.png
内边距是享有背景色的，它可以被背景色穿透。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS外边距margin的详解:
上外边距：margin-top
右外边距：margin-right
下外边距：margin-bottom
左外边距：margin-left
合写：margin：10px 200px 上下10像素，左右200px
margin： 上 右 下 左
image.png
image.png
margin：0 atuo可以让块级元素居中
image.png
