JavaWeb笔记:CSS总结

一、css的简介

二、css选择器

三、css属性

四、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;">你好啊小朋友</div>
           语法：
               (1)使用style属性将样式嵌入到html标签中
               (2)属性的写法：属性：属性值
               (3)多个属性之间使用分号;隔开
           不建议使用
       (2)内部样式
           在head标签中使用style标签进行css的引入
           <style type="text/css">
               div{color:red;font-size: 100px;}
           </style>
           语法：
               (1)使用style标签进行css的引入
                   <style type="text/css">
                       属性：type：告知浏览器使用css解析器去解析
               (2)属性的写法：属性：属性值
               (3)多个属性之间使用分号;隔开

       (3)外部样式
           将css样式抽取成一个单独css文件谁去使用谁就引用
           <link rel="stylesheet" type="text/css" href="demo1.css"/>
           语法：
               (1)创建css文件将css属性写在css文件中
               (2)在head中使用link标签进行引入
                   <link rel="stylesheet" type="text/css" href="css文件地址"/>
                   rel:代表要引入的文件与html的关系
                   type：告知浏览器使用css解析器去解析
                   href：css文件地址
               (3)属性的写法：属性：属性值
               (4)多个属性之间使用分号;隔开
       (4)@import方式
           <style type="text/css">
               @import url("css地址");
           </style>
           link与@import方式的区别：
               (1)link所有浏览器都支持 import部分低版本IE不支持
               (2)import方式是等待html加载完毕之后在加载
               (3)import方式不支持js的动态修改

二、css选择器

   1、基本选择器
       (1)元素选择器
           语法：html标签名{css属性}
           示例：
               <span>hello css!!!</span>
               <style type="text/css">
                   span{color:red;font-size:100px; }
               </style>
       (2)id选择器   id唯一性
           语法：#id的值{css属性}
           示例：
               <div id="div1">hello css1!!!</div>
               <div id="div2">hello css2!!!</div>
               <style type="text/css">
                   #div1{background-color: red;}
                   #div2{background-color: pink;}
               </style>
       (3)class选择器
           语法：.class的值{css属性}
           示例：
               <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属性}
       示例：
           <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:visited{css属性}
           示例：
               <a href="#">点击我吧</a>
               <style type="text/css">
                   a:link{color:blue}
                   a:hover{color:red}
                   a:active{color:yellow}
                   a:visited{color:green}
               </style>

   4、层级选择器
       语法：父级选择器子级选择器 .....
       示例：
           <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>span1-1</span>
               </div>
               <div class="dd2">
                   <span>span1-2</span>
               </div>
           </div>

           <style type="text/css">
               #d1 .dd2 span{color:red}
           </style>

三、css属性

   1、文字属性
       font-size:大小
       font-family:字体类型
   2、文本属性
       color:颜色
       text-decoration:下划线
           属性值：none   underline
       text-align:对齐方式
           属性值：left center right
           <div>hello css!!!</div>
           <a href="#">click me!!!</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：横向

       body{
           background-color: black;
           background-image: url("images/dog.gif");
           background-repeat: repeat-y;
       }

   4、列表属性
       list-style-type:列表项前的小标志
           属性值：太多了
       list-style-image:列表项前的小图片
           属性值：url("图片地址");

           <ul>
               <li>黑马程序员</li>
               <li>黑马程序员</li>
               <li>黑马程序员</li>
               <li>黑马程序员</li>
           </ul>
           <style type="text/css">
               /* ul{list-style-type: decimal-leading-zero;} */
               ul{list-style-image: url("images/forward.gif");}
           </style>

   5、尺寸属性
       width:宽度
       height:高度
           <div id="d1">div1</div>
           <div id="d2">div2</div>
           <style type="text/css">
               #d1{background-color: red;width: 200px;height: 200px;}
               #d2{background-color: pink;width: 200px;height: 200px;}
           </style>
   6、显示属性
       display:
           属性值：none:隐藏
                   block:块级显示
                   inline：行级显示

           <form action="">
               name:<input id="name" type="text" /><span id="span">对不起输入不符合要求</span>
               <br>
               pass:<input id="pass" type="password" />
               <br>
               <input id="btn" type="button" value="button" />
           </form>
           <style type="text/css">
               span{color:red;display: none}
           </style>
           <script type="text/javascript">
               document.getElementById("btn").onclick = function(){
                   document.getElementById("span").style.display = "inline";
               };
           </script>

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

四、css盒子模型

   border:
       border-width:边框的宽度
       border-color:边框的颜色
       border-style:边框的线型

       border-top:上边框
       border-bottom:下边框
       border-left:左边框
       border-right:右边框

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