CSS相关

一、css简介

1. 什么是css？
   css是对html进行样式修饰的语言，层叠样式表
   层叠：
     层层覆盖叠加，不同css样式修饰同一个html标签，样式有冲突的部分应用优先级高的，不冲突的共同作用。
   样式表：
     css属性样式的集合。

2. css的作用
   (1)修饰html，使html样式更加好看
   (2)提高样式代码的复用性
   (3)使html的内容和样式分隔开，便于后期的维护和修改

3. css的引入方式和书写规范
   (1)内嵌样式(把css代码嵌入到html标签中)
     例如：

   <div style="color:red;font-size: 100px;">    hello world!</div>

     语法：
       (1)使用style属性把样式嵌入到html标签中
       其余属性看注解
   (2)内部样式 (在head标签中使用style标签引入css)
     例如：

   <style type="text/css">        div{color:red;font-size: 100px;}</style>

     语法：
       (1)使用style标签在head标签内引入
         添加type=“text/css”告诉浏览器用css解析器去解析
       其余属性看注解
   (3)外部样式(将css样式抽取成一个css文件，需要使用的时候就引入这个文件)
     例如：

   <link rel="stylesheet" type="text/css" href="myCSSCode.css"/>    这样就引入了名为myCSSCode.css文件，href属性为css文件地址

     语法：
       (1)创建css文件，并把css的样式属性写到css文件中
       (2)在head中使用link标签进行引入
         <link rel="stylesheet" type="text/css" href="css文件地址"/>
         rel:代表要引入的文件与html的关系
         type：告知浏览器使用css解析器去解析
         href：css文件地址
       其余属性看注解
   (4)@import方式
     例如：

   <style type="text/css">        @import url("css地址");</style>

     link方式和@import方式的区别：
       (1)link方式所有浏览器都支持，import方式部分低版本的ie不支持
       (2)import是等html加载完毕才加载
       (3)import不支持js的动态修改

  注解：共同属性
    (1)属性的写法—–属性:属性值
    (2)多个属性之间用分号；隔开

二、css选择器

1. 基本选择器
   (1)元素选择器：
   语法：html标签名{css属性}
   eg:

   <span>hello world</span><style type="text/css">    span{color:red; font-size:100px}</style>

   (2)id选择器 (id是唯一的不能重复)
   语法:#id的值{css属性}
   eg：

   <style>    #menu{background-color:red;}    #page{background-color:green;}</style><div id="menu">hello menu!</div><div id="page">hello page!</div>

   (3)class选择器
   语法: .class的值{css属性}
   eg:

   <div class="style1">div1</div><div class="style1">div2</div><div class="style2">div3</div><style type="text/css">    .style1{background-color: red}    .style2{background-color: pink}</style>

   注意：选择器的优先级：
     id>class>元素

2. 属性选择器
   语法：基本选择器[属性=‘属性值’]{css属性}
   eg：

   <form action="">    name:<input type="text"/><br>    pass:<input type="password"/><br></form><style type="text/css">    input[type='text']{background-color: yellow}    input[type='password']{background-color: pink}</style>

3. 伪元素选择器
   a标签的伪元素选择器
   语法：
     静止状态      a:link{css属性}
     悬浮状态      a:hover{css属性}
     触发状态      a:active{css属性}
     完成状态      a:visted{css属性}
   eg:

   <a href="#">点我呀！</a><style type="text/css">    a:link{color:blue}    a:hover </style>

4. 层级选择器
   语法: 父级选择器 子级选择器….
   eg：

   <div id="d1">    <div class="dd1">        <span>span1-1</span>    </div>    <div class="dd2">        <span>span1-2</span>    </div></div><div id="d2">    <div class="dd1">        <span>span2-1</span>    </div>    <div class="dd2">        <span>span2-2</span>    </div></div><style type="text/css">    #d1 .dd2 span{color:red}</style>

三、css属性

1. 文字属性
   (1)font-size：字体大小
   (2)font-family:字体类型(宋体、楷体之类的)

2. 文本属性
   (1)color:文本颜色
   (2)text-decoration:下划线
     属性值：none underline
   (3)text-align:对齐方式
     属性值：left center right
   eg：

   <div>hello world!</div><a href="#">点我呀！</a><style type="text/css">    div{        color:red;        text-decoration:underline;        text-align:right;    }    a{        text-decoration:none;    }</style>

3. 背景属性
   background-color： 背景颜色
   background-image：背景图片
     属性值：url(“图片地址”)；
   background-repeat：平铺方式
     属性值：默认横向纵向平铺
       repeat：横向纵向平铺
       no-repeat：不平铺
       repeat-y：纵向平铺
       repeat-x：横向平铺
   eg：

   <style type="text/css">    body{        background-color:black;        background-image:url("地址");        background-repeat:repeat-y;    }</style>

4. 列表属性
   list-style-type:列表项前的小标志 如小圆点或者小方块等
   list-style-image:列表项前的小图片
     属性值：url(“图片地址”)
   eg:

   <ul>    <li>hello world</li>    <li>hello world</li>    <li>hello world</li><ul><style type="text/css">    ul{list-style-image:url("地址")}</style>

5. 尺寸属性
   width：宽度
   height：高度
   eg：

   <div id="d1">div1</div><style type="text/css">    #d1{        width:100px;        height:200px;    }</style>

6. 显示属性
   display：
     属性值：
       none：隐藏
       block：块级显示
       inline：行级显示
   eg：

       <form action="">        name:<input id="name" type="text" />        <span id="span">你好啊啊</span><br>        pass:<input id="pass" type="password" /><br>        <input id="button" type="button" value="button" />    </form>    <style type="text/css">        span{color:red;display: none}    </style>    <!--js动态更改display的值！-->    <script type="text/javascript">        document.getElementById("button").onclick = function(){            document.getElementById("span").style.display = "inline";        };    </script>

7. 浮动属性
   float：
     属性值：left right
       clear：清除所有浮动
     缺点：
       (1)影响相邻元素不能正常显示
       (2)影响父级元素不能正常显示

四、盒子模型

1. border:
     border-width:边框的宽度
     border-color:边框的颜色
     border-style:边框的线型
     border-top:上边框
     border-bottom:下边框
     border-left:左边框
     border-right:右边框

2. padding:
     代表边框内壁与内部元素之间的距离
     padding:10px;代表上下左右都是10px
     padding:1px 2px 3px 4px;上右下左
     padding:1px 2px;上下/左右
     padding:1px 2px 3px;
     padding-top:单独设置

3. margin:
     代表边框外壁与其他元素之间的距离
     margin:10px;代表上下左右都是10px
     margin:1px 2px 3px 4px;上右下左
     margin:1px 2px;上下/左右
     margin:1px 2px 3px;
     margin-top:单独设置