前端入门CSS学习

行内样式表：由于一旦改动地方过大，写的代码就要变多，只适合临时测试代码块用。

内嵌样式表只适合当前的文档文件

导入样式表可能用于比较大型的网站。

选择器：

（一）基本选择器：

缺点：

会把所有对应的标签都套上样式，不存在某个对应的样式不设定。

使用：，类选择器可以在多处地方使用

line-height 行间距属性 text-indent 缩进属性

id选择器更多的用来当作一个标签地址，保证唯一，通过id能找到对应的标签对象，下面给出id标签的定义：

font-weight:normal 去掉加粗，变正常至于颜色的属性值，可以使用Photoshop（简称PS）拾取工具进行获取获得。

通用选择器：（*所有）给所有的标签加样式语法：*{属性：属性值； }

text-decoration:underline 属性的作用是：文本修饰：下划线

复合选择器：

注意：这些选择器没有限定，可以是各种类型的选择器。

后代选择器，是一种树形数据结构。有树形数据结构的思想，就非常好办：

后代选择器：

语法：

选择器1 选择器2 选择器3{属性：属性值；}

这里也没有限定选择器的类型，同多元素选择器。注意：选择器1和选择器2之间用空格隔开，多个选择器的情况以此类推。

表示选择器1里面的选择器2，选择器2里面选择器3，以此类推。

子元素选择器：

给html标签的子标签加样式格式：选择器>选择器{ 属性：属性值； } 只涉及父子节点，祖孙节点不算在内。所以子元素选择器指向比后代选择器更为明确。

要注意浏览器兼容性：在IE6中，只支持后代选择器，不支持子选择器，而在IE7和FF中既支持后代选择器，又支持子选择器

这些元素选择器是按照树的结构来进行操作的，只要符合语法，子代，后代，多元素选择器可以混合在一起使用。

CSS 伪类用于向某些选择器添加特殊的效果。

text-decoration:none (去掉下划线）

文本常见的几种css样式属性：

背景属性：

对position的讲解：

图片的起始位置是以浏览器左上角坐标（0，0）处开始的，所以这个属性的格式是，background-position: x y;没错就是一个坐标系。意味着图片的左上角顶点在坐标（x,y)处开始伸展开来直到右下角也就是全部显示完成。

对于简写：

background：xxx xxxx 等除了position属性的x,y值要按照顺序写，其余都可以不按顺序写。

ps：attachment的默认值是scroll;

美化无序列表前面的黑圆点

表格：

并不是只有表格才可以加边框：

顺序是上右下左

注意：设置了margin:auto属性，会在当前盒子或者环境自动居中。

有个这样子的情况：

赋值一个400X300的容器，里面放入一段文字（这段文字刚好超出了容器底部一点），这时候设置了padding-bottom:xx,那么整个容器的高也会改变,变化后的值等于原来的高加上padding-bottom的值

内边距都可以这样简写：

如果说一个盒子的外壳是边框，内容与边框的距离是内边距，盒子之间的距离是外边距，或者说是边框以外的距离。

外边距：

也是上右下左的顺序；

简写：

有这样一个情况：

一个盒子在顶部有个属性： margin-bottom:50px 第二个盒子设置了margin-top:40px

那么它们之间的外边距不是两者之和，是取一个二者之间最大的值。比如上面就取的50px

引入一个文档流的概念：

正常情况下，是按照从上到下排列的，当有布局网页需求时，按照需要将横向排列布局。ps:div默认的正是纵向的块级元素

所以大体上网站的结构就是纵向与横向的div块

尽量使用这种结构，基本上不设置右右右的结构，因为按照文档流的顺序，全部都设置在右边看起来会有些怪异。

想让若干个盒子都横排，就都要设置浮动。

浮动会将元素从文档流中删除，他的空间会被其它元素补上，并且设置了浮动以后，无论本身是什么元素都会变成块状。

在设置了浮动的盒子里面可以正常设置纵向排列

布局的经验：通过盒子搭成的基本网页结构，对于同一个盒子（父类）里面的多个盒子排列一般是通过设置浮动（对象是个列表）使其成为块级。

字体加粗：font-weight:bold normal(字体正常）font-style:normal(文字风格恢复正常)

清除格式：

清除所有html标签格式，如果后期使用再重新写。这里的格式是指一些标签比如列表有自带的padding等。

语法：

*{margin:0px;padding:0px} 兼容写法：Body，你要清楚的标签名xx，xx，xxx，xxx{margin:0px;padding:0px}

以传智云课堂来示例：

新手应该规划清楚布局结构，再动手。布局清楚就很好写。

若像img标签那样自带宽高的行内元素，可以设置宽高，不受规则影响，比较特殊。

所以行内元素转换为块级步骤（以导航栏为例子）：css设置display:block，然后再设置浮动横向排列即可。

ps:css的16进制颜色写在html中会转成10进制。

选择器权重：

可见：写的越精确权重越高，优先级越高，浏览器显示的样式就是优先级高的对象。

一般网页不设置高，因为直接由内容撑起容器。

清除浮动的影响：

css的浮动是float属性，该属性没有继承性，默认值为none，

常见的网页浮动：

这种结构不受浮动的影响，因为大盒子之间符合正常的文档流。

下面来看这种受影响比较大的：

这种结构如果上面两个盒子都设置浮动，那么第三个盒子会顶上去，因为浮动不占空间，那么清除浮动意思就是清除浮动对该元素的影响让它保持独占一行。所以设置清除浮动clear：both即可。

定位坐标默认为左上。

固定定位是不占空间的，层级高的意思就是它能覆盖掉下面的元素（体现在颜色上）。

相对定位是占空间的，层级也高于普通元素。

相对定位通常搭配绝对定位

通常我们使用position:absolute；position:relative进行绝对定位布局，通过CSS进行定义定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute进行定位，同时不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。绝对定位非常好用，但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右间距，同时可能会造成CSS代码臃肿，更加经验适当使用，用于该使用地方。

比如，a b c ，a是爷爷，b是父亲，c是孩子，a和b都设置相对定位，c也设置的话是参考b不参考a。当然b就会去参考a。