JavaWeb笔记-02-CSS

最新推荐文章于 2024-04-04 12:25:24 发布

一万年行不行

最新推荐文章于 2024-04-04 12:25:24 发布

阅读量132

点赞数

本文链接：https://blog.csdn.net/qq_41307491/article/details/81160029

版权

CSS

1. css简介

css: 层叠样式表
层叠：一层一层
样式：有很多的属性值。
使显示效果更加好

css将网页内容和显示样式进行分离，提高了显示功能。

div特点：自动换行

2. css和html的结合方式（四种）

   1）在每个html标签上都有一个style
       <div style = "background-color:red ; color:green ; ">
   2）使用html的一个标签实现<style>标签，写在head里面，相当于Java里的方法体
  <style tye="text/css">
            //css代码
            div{
            background-color:red;
            color:green ;
            }
  <style>

      <div>实例</div>
   3）在style标签里面使用语句 ---将内容和样式分离，相当于Java中接口
       @import url(css文件的路径)

       --创建一个css文件，css文件中编写样式代码
        <style tye="text/css">           
            @import url(css文件的路径)
        <style>
   4) 使用头标签link,引入外部css文件

       创建一个css文件
       引入
       <link rel="stylesheet" type="text/css" href="css文件的路径" />
   第三种缺点，在某些浏览器下不起作用
   一般使用第四种

   ***css的优先级（一般情况下）
       由上到下，由外到内,优先级增高
       后加载的优先级高

3. css的基本选择器（三种）

   选择器---选择操作哪个标签内的属性

   格式：
   选择器名称
       {
           属性名：属性值
           属性名：属性值
           ....
       }

   1）标签选择器

用标签作为选择器名称

   2）class选择器 ( .名称 )

* 每个html标签都有一个属性 class,用class值作为选择器名称
div.aaaaa{
           background-color:red;
         }
        选择div中class值为aaaa的

    .aaaa{
           background-color:red;
         }
        所有class值为aaaa的都被选择

       -<div class="aaaa" > 123456 </div>
   3）id选择器（ #名称）

       * 每个html标签都有一个属性id ,用id值作为选择器名称
      div#aaaa{
            background-color:red;
        }
        选择div中id值为aaaa的

        #aaaa{
            background-color:red;
        }
        所有id值为aaaa的都被选择

        -<div id="aaaa" > 123456 </div>
***css的优先级（特殊情况下）
style > id选择器 > class选择器 > 标签选择器

4.扩展选择器

1）关联选择器

eg:<div><p> 123456 </p></div>
只设置div标签里p 标签的的样式，设置被嵌套在标签里面的样式
   div p{
            ...
        }
   2)组合选择器

<div> 123456 </div>
       <p> 654321 </p>
       将两个标签设为相同样式
   div,p{
            ...
         }
   3)伪元素选择器

* * 超链接状态

           原始状态鼠标放上去状态点击点击之后
           :link :hover :active :visited

           a:link{   a:hover{ a:activ{   a:visited{
           } } } }

           <a href = "www.baidu.com">超链接</a>

CSS盒子模型：在进行布前需要把数据封装到一块一块的区域内（div+css）

对数据操作，需要把数据放在一个区域里(div)

边框

统一设置三个属性
       border： width(px) style color

       分开设置
       border-top：上
       border-bottom：下
       border-left：左
       border-right：右

   内边距

统一设置
       padding: width(px)

       分开设置：
       padding-top：上
       padding-bottom：下
       padding-left：左
       padding -right：右

   外边距

统一设置
       margin： length(px)

       分开设置
       margin-top：上
       margin-bottom：下
       margin-left：左
       margin -right：右

6.css的布局悬浮

float

left : 将自身固定到左边，下一行对象漂浮到右边，下下一行上升一行
right ：将自身固定到右边，下一行对象漂浮到左边，下下一行上升一行

7.css布局的定位

position:

  absolute:将对象从文档流中拖出，漂浮在文档上面(漂浮位置需要设定)，下面对象自动上升

       relative: 不会从文档流中拖出，只改变自身位置。

       都可通过top、bottom、left、right设定位置