带你玩转JavaWeb开发之三 - CSS从基础到实战

一,什么是CSS?

Cascading Style Sheets层叠样式表

 

 

 

 

 

层叠:就是层层覆盖叠加,如果有多种样式对同一html标签进行修饰,样式有冲突的部分应用优先级高,不冲突的部分共同作用

样式表:就是css属性样式的集合

 

• CSS的作用

   

   

   

   

   

  1. 对html页面进行美化和修饰

  2. 将html的内容和样式进行了分离,让文档看起来更清晰

  3. 提高代码复用性

   

  ​

  1. CSS的选择器(三种)

  一,基本选择器(三种)

  1.ID选择器

   

   

   

   

   

  ​

  (1)id选择器    id唯一性

              语法：#id的值{css属性}

                #ID{

                      属性名称:属性的值

                   }

              示例：

                  <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>

   

  2.类选择器

   

   

   

   

   

  ​

  (2)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>

   

  3.元素选择器

   

   

   

   

   

  (3)元素选择器

              语法：html标签名{css属性}

                格式:

                  元素(标签名称){

                       属性名称:属性的值

                  }

              示例：

                  <span>hello css!!!</span>

                  <style type="text/css">

                      span{color:red;font-size:100px; }

                  </style>

   

二,属性选择器

 

 

 

 

 

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

        示例：

            <form action="">

                name:<input type="text" /><br/>

                pass:<input type="password" /><br/>

            </form>

            <style type="text/css">

                input[type='text']{ overflow: visible; font-family: inherit; font-size: inherit; white-space: pre-wrap; border-radius: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; margin: 0px; word-wrap: break-word; color: inherit; z-index: 2; position: relative; word-break: normal; border-right-style: none; width: inherit; padding: 0px 4px; background: transparent;">                input[type='password']{ overflow: visible; font-family: inherit; font-size: inherit; white-space: pre-wrap; border-radius: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; margin: 0px; word-wrap: break-word; color: inherit; z-index: 2; position: relative; word-break: normal; border-right-style: none; width: inherit; padding: 0px 4px; background: transparent;">            </style>

 

三,伪元素选择器

 

 

 

 

 

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>

 

四,层级选择器

 

 

 

 

 

语法：父级选择器 子级选择器 .....

        示例：

            <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>

 

2. 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)多个属性之间使用分号;隔开

 

优先级:ID选择器>类选择器>元素选择器

三,css属性

• 文字属性

   

   

   

   

   

  font-size:大小

  font-family:字体类型

   

• 文本属性

   

   

   

   

   

  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>

   

• 背景属性

   

   

   

   

   

  background-image:背景图片

              属性值：url("图片地址");

          background-repeat:平铺方式

              属性值：默认横向纵向平铺

                      repeat:横向纵向平铺

                      no-repeat:不平铺

                      repeat-y：纵向

                      repeat-x：横向

          body{

              background-image: url("images/dog.gif");

              background-repeat: repeat-y;

          }

   

• 列表属性

   

   

   

   

   

  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>

   

  ​

• 尺寸属性

   

   

   

   

   

  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>

   

  ​

• 显示属性

   

   

   

   

   

  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>

   

  ​

• 浮动属性(float)

   

   

   

   

   

      <div style="width:400px;height: 400px;border: 1px solid red;">

              <div style="width: 100px;float: left; height: 100px;border: 1px solid blue;"></div>

              <div style="clear: both;"></div>

              <div style="width: 110px;height: 100px;border: 1px solid yellow;"></div>

              <div style="width: 120px;height: 100px;border: 1px solid green;"></div>

          </div>

  float:

              属性值：left  right

                      clear:清除浮动 left right both

              缺点： (1)影响相邻元素不能正常显示

                      (2)影响父元素不能正常显示

    text-decoration-none去掉下划线

   

  ​

四,盒子模型

 

 

 

 

 

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:单独设置