前端web开发系列 css入门

2018-08-12 本文已影响0人一只96年的程序猿

css概述

CSS:层叠样式表(Cascading Stytle Sheets)，用来修饰(美化)HTML网页的一门技术。使用CSS来设置样式，可以将设置样式的CSS代码和展示数据的HTML代码进行分离。并且还可以实现代码的复用，增强网页的展示能力。

1.元素的类型划分

块级元素：默认情况下独占一行的元素
(h1,hr,p,ul,ol,table,form,div...)
行内元素：默认情况下，多个元素可以显示在同一行
(span,a,br,b,strong,img,del,u,input,select,textarea...)

2.引入css

通过标签上的style属性引入CSS样式

<!-- 
    1.通过标签上的style属性给div设置样式
      边框:1px solid red 
      字体大小 40px
      背景颜色为 pink
 -->
<span style="border: 1px solid red;font-size: 40px;background-color: pink">span111</span>

这种方式可以快速为某些标签设置css样式。但这种方式设置样式不推荐大量使用，会造成页面结构的混乱，不利于后期的维护及扩展。
<html>

<span style="border: 1px solid red;font-size: 40px;background-color: pink">span111</span>
</html>

通过head标签内部的style标签引入CSS样式

<!-- 
     2.通过style标签给span设置样式如下
     边框: 2px solid cyan
     字体大小: 35px
     字体加粗
-->
<style type="text/css">
            /* ****** CSS样式 ****** */
            span{
                border: 2px solid cyan;
                font-size: 35px;
                font-weight: bolder;
            }
</style>

这种方式是将所有的css代码集中在一个style标签内部统一进行管理，实现了将展示数据的HTML代码和设置样式的CSS代码进行了初步分离。

通过链接引入外部的CSS文件来引入CSS样式

<!-- 
   3.通过link标签引入外部的css文件，样式如下：
     边框: 2px solid blue;
     字体大小: 30px;
     字体为黑体
 -->
 <link rel="stylesheet" type="text/css" href="css/demo.css">

这种方式是将所有的css代码放在一个独立的文件中进行统一管理，真正的实现了html代码和css代码的分离。

4.css选择器

所谓的选择器就是在HTML中帮助我们选择标签进行修饰的技术。

1.基本选择器

标签名(元素名)选择器：

根据元素的名称来选择指定名称的元素进行样式的修饰.
格式：元素名{css属性}

/* 1.标签名选择器 
将所有span标签的背景颜色设置为#DDA0DD, 设置字体大小为24px，字体加粗
*/
span{
     background-color: #DDA0DD;     
     font-size: 24px;
     font-weight: bold;
    }

class选择器

通过标签上通用的属性class，可以为标签指定所属的类(组)，所有class值相同的元素则为一组(类)，可以通过class属性的值选择这一组的标签，为这一组的标签统一设置样式。
格式：.类名{css属性...}

/* 2.类选择器
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#8FBC8F, 字体颜色为绿色
(2)将div1下的span和内容为"span111"的span字体颜色设置blue, 背景颜色设置为#F0E68C
*/
.s1{
    background-color: #8FBC8F;          
    color: #F0E68C;
    }
.s2{
    background-color: #F0E68C;
    color: blue;
    }

id选择器

通过标签上通用的属性id，可以为标签设置唯一的标识(ID的值在整个HTML中是独一无二的)，可以通过id的值选中指定的元素.
格式：#id值{css属性...}

/* 3.id选择器 
用id选择器将第一个p标签设置字体加粗,首行文本缩进20px.
*/
#p1{
    font-weight: bold;          
    text-indent: 20px;
    }

2.扩展选择器

后代选择器

在父选择器选中元素的内部，选中指定的所有后代元素
格式：父选择器后代元素选择器{ css属性… }

/* 将div下所有的span标签的字体大小设置为22px, 背景颜色设置为#DDA0DD*/
#d1 span{/* 选中ID值为d1元素内所有span元素*/
    font-size: 22px;
    background-color: #DDA0DD;
}

子元素选择器

在父选择器选中元素的内部，选中指定的所有子元素
格式：父选择器>子元素选择器{ css属性… }

/* 将div下所有的span子元素标签的字体大小设置为16px, 背景颜色设置为#DEB887*/
#d1>span{/* 选中ID值为d1元素内所有span子元素*/
    font-size:16px;
    background-color: #DE8887;
}

分组选择器

将多个选择器选中的元素合并在一起统一设置样式。
格式：选择器1,选择器2, … 选择器n{ css属性… }

/* 将span1、span2和p标签下的span的背景颜色设置为 #F4A460*/
.c1,.c2,#p1 span{
    background-color: #F4A460;
}

属性选择器

根据属性选中符合条件的元素来设置样式
格式：选择器[属性条件．．]{ css属性 }

/*(1)将所有有class属性的元素的边框设置为2px、实线、红色.
  (2)将所有的type="text"的<input>标签的背景颜色设置为red, 设置字体首行缩进10px*/
*[class]{
    border: 2px solid red;
}  
input[type='text']{
    background-color: red;
    text-indent: 10px;
}

相邻兄弟选择器

相邻兄弟指的是如果两个元素具有相同的父元素，并且紧挨着，这两个元素就是相邻兄弟元素。可以通过相邻兄弟选择器选中A元素后面的B元素。
格式：大哥+小弟{ css属性… }
大哥~小弟{css属性...}

/* 将id为p1元素后面相邻的p元素的背景颜色设置为 #DB7093*/
#p1+p{
    background-color:#DB7093;
}
/*选中id为div1后面所有的span元素*/
#div1~span{
}

伪元素选择器

根据元素的状态选中指定的元素。

/*(1)当鼠标移入div下的a标签上时, 为其设置如下状态: 字体为blue, 字体大小为28px. 边框: 1px solid red, 并且文本内容没有下划线.
  (2)给div下的第一个a元素设置背景颜色为 lightgreen.*/
div a:hover{
    color: blue;
    font-size: 28px;
    border: 1px solid red;
    text-decoration: none
}
div a:first-child{
    background: lightgreen;
}

5.盒子模型

所谓的盒子模型指的是，可以将HTML页面中所有的元素都看成一个一个的盒子(或者是框)，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以使用相应属性来表示。

盒子模型.gif

margin(外边距)

元素与元素之间的距离
垂直外边距的合并现象: 如果两个元素在垂直方向的外边距相遇时, 将会有合并的现象, 合并后的结果是, 取两个外边距之中的较大者来作为两个元素的外边！
如何让块级元素居中显示:
margin: 0px auto;

border(边框)

padding(内边距)

元素的实际宽度=元素设置的宽度+元素的左右边框宽度+左右内边距+左右外边距

元素的实际高度=元素设置的高度+元素的上下边框宽度+上下内边距+上下外边距

6.常用css属性

display属性

置元素是否显示以及如何显示(元素的显示方式)

块级元素：display的值默认为block
(1)

7.内容补充

颜色

颜色名称, 比如: red, green, blue

rgb三基色, 比如: rgb(255, 0, 0) , rgb(0, 255, 0) , rgb(0, 0, 255)

XXXXXX, 比如: #FF0000, #00FF00, #0000FF