html+css学习笔记二

1.css的基本语法及页面的引用

css基本语法

css的定义方法是：选择器{属性:值;属性:值;属性:值;}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属于每个属性有一个或者多个值。

css页面引入方法

1.外联式：通过标签link标签，链接到外部样式表到页面中。

<link rel="stylesheet" type="text/css" href="css/main.css">

2.嵌入式：通过style标签，在网页上创建嵌入的样式表。

<style type="text/css">

     div{ width:100px; heught:100px; color:red }

     ........

</style> 

3.内联式：通过标签的style属性，在标签上直接写样式。

<div style="width:100px; heught:100px; color:red ">.......</div>

2.css文本设置

常用的应用文本的css样式：

• color：设置文字的颜色。
• font-size：设置文字的大小。
• font-family：设置文字的字体。
• font-style：设置字体是否倾斜。如：font-style="normal",设置不倾斜，font-style="italic"设置文字倾斜。
• font-weight：设置文字是否加粗，如：font-weight=bold设置加粗，font-weight=normal设置不加粗。
• line-height：设置文字的行高，设置行高相当于在每行文字的上下同时加间距。
• font：同时设置几个属性，写的顺序有兼容问题，建议按照如下顺序写，font：是否加粗 字号/行高 字体。
• text-decoration：设置文字的下划线，如text-decoration=none将文字下划线去掉。
• text-indent：设置文字行首缩进。
• text-align：设置文字的水平对齐方式。

3.css颜色表示法

css颜色主要有三种表示方法：

1. 颜色名表示法，如red红色。
2. rgb表示：如rgb(255,0,0).
3. 16进制数值表示，如#ff0000表示红色，这种用的比较多。

4.css选择器

      1.标签选择器

       标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。

*{margin:0;padding:0}

div{color:red}

<div class="box">....</div>

       2.id选择器

       通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐作为选择器。

#box{color:red}

<div id="box">....</div>

     3.类选择器

      通过类名来选择元素，一个类可以应用于多个元素，一个元素也可以使用多个类，应用比较灵活，也可以进行复用，比较常用。

.red{color:red}

.big{font-size:20px}

     4.层级选择器

     主要世用在选择父元素下的子元素，或者子元素下的子元素，可以与标签元素结合使用，减少命名，也可以通过层级防止命名冲突。

.box span{color:red}

.box .red{color:pink}

<div class="box">

      <span>.....</span>

      <a href="#" class="red">....</a>

</div>

      5.组选择器

       多个选择器，如果有同样的样式设置，可以使用组选择器。

.box1,.box2,.box3{width:100px;height:100px}

.box1{background:red}

.box2{background:red}

.box3background:red}

<div class="box1">...</div>

<div class="box2">...</div>

<div class="box3">...</div>

      6.伪类及伪元素选择器

      常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after，它们可以通过样式在元素中插入内容。

.box1:hover{color:red}

.box2:before{content:"行首文字";}

<div class="box1">...</div>

<div class="box2">...</div>

5.css盒子模型

      盒子模型：

         元素在页面显示成一个方块，类似一个盒子，css盒子模型就是使用现实中的盒子来做比喻，帮助我们设置元素对应的样式。把元素叫做盒子，设置对应的样式分别为盒子的宽度（width）、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距（padding）、盒子与盒子之间的间距（margin）。

         设置宽高：width:200px;这个宽度指的是盒子内容的宽度， height:200px;这个高度指的是盒子内容的高度。这两个都不是指盒子整体。

         设置边框：设置一边的边框，使用border设置。

         设置内间距：设置盒子四边的内间距可以使用padding来进行设置，其中写一个代表四边全部设置一样的如padding:10px;，设置4个按照顺时针从顶部开始，如padding:10px 20px 30px 40px。

         设置外间距：外边距的设置方法和padding的设置方式相同，使用margin。

      margin相关技巧：

         1.设置水平居中：margin:x auto;

          2.margin负值让元素位移及边框合并。

      外边距合并：

          指的是当两个垂直外边距相遇的时候，它们将形成一个外边框，合并后的外边距的高度等于两个发生合并的外边距的高度中较大者，解决的方式如下：

          1.使用这种特性；

           2.设置一边的外边距，一般设置margin-top

           3.将元素浮动或者定位

       margin-top塌陷

           在两个盒子嵌套的时候，内部的盒子设置margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

           1.外部盒子设置一个边框

            2.外部盒子设置overflow:hidden;

            3.使用伪元素类：

   .clearfix:before{

        content:'';

        display:table; 

}

      css元素溢出

         当元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方式是通过overflow属性来设置。

         overflow的设置项：

         1.visible：默认值。内容不会被修剪，会呈现在元素框之外。

         2.hidden：内容会被修剪，并且其余的内容是不可见的，此属性还会有清除浮动，清除margin-top塌陷的功能。

         3.scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

         4.auto：如果内容被修剪，那么浏览器会显示滚动条以便查看其余的内容。

         5.inherit：规定应该从父元素继承overflow属性的值。