Java学习篇——JavaWeb：CSS

CSS:层叠样式表：

作用:,美化页面.

内联样式：在标签的style属性中添加样式代码, 弊端:不能复用   

<h1 style="color: red;background-color: green">内联样式1</h1>

内部样式：在head标签里面添加style标签, 通过选择器找到元素后再添加样式代码, 可以复用但是不能多页面复用

<style>
    /*css注释*/
    /*通过选择器找到元素然后再添加样式代码*/
    /*标签名选择器*/
    h2{
        color: blue;
        background-color: yellow;
    }
</style>

外部样式：

• 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以多页面复用,可以将样式代码和html代码分离开.
• 工作中外部样式使用的最多, 

• <link rel="stylesheet" href="My.css">  写css代码在MY.css中。

选择器：  选择不同的标签加样式。
 

1、id选择器:   给元素加id="xxx";id不能全数字.   head中新建style 中#id名

2、类选择器  给元素加class="xxx"  也不能为全数字.

3、分组选择器: 将id  class  行标签  等用逗号分开.

4、属性选择器:  input [type=" xxx"{color: 颜色}]

5、任意元素选择器*{设置各种}

<style>
      /*id选择器*/
    #p1{
      color: red;
    }
    /*类选择器*/
    .c1{color: green}
    /*分组选择器*/
    h2,#p1,.c1{background-color: yellow}
    /*属性选择器*/
    input[type='text']{background-color: blue}
    /*任意元素选择器*/
    *{
        /*边框: 粗细 实线边框 颜色*/
        border: 1px solid red;
    }
  </style>

分区标签:

将多个相关的标签放到一起.便于管理.

div:块级       独占一行

span: 行级   共占一行

***至少3个部分:头  体  脚.再有多个分区.

html5标准中新增了分区标签,作用与3div一样.为了提高代码可读性.

header头--footer脚--section区域--article文章/文字--nav导航

关于分区的选择器：

子孙后代选择器：

<!--子孙后代选择器, 从最大标签开始 选择最后一个div里面所有的p  包括最底层p5-->
    <!--<style>
        body div div p{
            background-color: bisque;
        }
    </style>-->

子类选择器

<!--子元素选择器-->
    <style>
        body>div>div>p{/*不选body时在两层div里面的都算.:p3  p4  p5 */
            background-color: blue;
        }
    </style>

伪类选择器 ：更改不同状态下的样式。    link 为访问状态...... 更多参考CSS 教程

<style>
        a:link{color: red}/*未访问状态*/
        a:visited{color: yellow}/*访问过*/
        a:hover{color: lightpink}/*悬停*/
        a:active{color: aliceblue}/*点击状态*/
    </style>

---

---

---

颜色赋值：

三原色：红绿蓝   RGB   取值范围 ：0-255

五种赋值方法：

——颜色单词red/blue/yellow

——6位16进制：#ff0000

——3位16进制：#fff

——3位10进制：rgb（255,12,12）

——4位10进制：rgba（212，,55,55,0-1）a：透明度  0到1

文字、文本样式：

文本和字体相关样式
text-align: left/right/center; 文本水平对齐方式
text-decoration: overline/underline/line-through/none 文本修饰
line-height:20px; 行高, 多行文本可以控制行间距, 单行文本可以实现垂直居中
font-size: 20px; 设置字体大小
font-weight:bold/normal; 设置加粗或去掉加粗
font-style:italic; 设置斜体
font-family:xxx,xxx,xxx; 设置字体
font: 20px xxx,xxx,xxx; 设置字体大小和字体
text-shadow: 颜色 x偏移值 y偏移值 浓度（值越大越模糊）

<style>
        div {
            width: 200px;
            height: 50px;
            border: 1px solid red;
            text-align: center; /*水平对齐方式*/
            /*文本修饰overline/underline/line-through/none*/
            text-decoration: line-through;
            /*通过行高设置垂直居中*/
            line-height: 50px;
            /*字体大小*/
            font-size: 20px;
            font-weight: bold;/*加粗*/
            font-style: italic;/*斜体*/
        }

        a {
            text-decoration: none; /*去掉自带下划线*/
        }
        h1{
            font-weight: normal;/*去掉加粗效果*/
            /*字体设置*/
            /*font-family: cursive;*/
            font: 50px cursive,Onyx,fantasy;
        }
    </style>

元素显示方式：

block: 块级元素的默认值 , 特点: 独占一行,可以修改元素的宽高 , 包括: div,h1-h6,p
inline: 行内元素的默认值, 特点:共占一行, 不可以修改元素的宽高, 包括: span, b,i,s,u,超链接a
inline-block: 行内块元素的默认值, 特点:共占一行, 可以修改宽高, 包括:img,input
none:隐藏元素
行内元素不能修改宽高, 如必须修改 则需要先把display改成block或inline-block

span {
            border: 1px solid blue;
            width: 100px;
            height: 100px;
            /*行内元素不能修改宽高, 如必须改则修改display为块级或行内块*/
            display: inline-block;
        }

—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

盒子模型：

把所有的网页元素都看成一个盒子，

它具有：（具体查看苍老师css文档）

content文本样式，

padding内边距（边框和文本），

border边框，

margin外边距（不同元素之间的距离）   四个属性，这就是盒子模型。

浏览器右键检查——小箭头查看样式。

 

 

外边距：margin

~取其中一个设置的最大值。

~span行内上下外边距无效。

~外边距：左右元素添加 左右边距，取相加值。

 ~元素的上边缘和上级元素的上边缘重合时添加  上外边距会发送粘连。在上级元素添加  overflow：hidden；解决粘连问题。

~部分标签自带外边距：body  p  h1-h6  ...

内边距：padding

~添加内边距会改变外边距，所以增内减外  。

~部分标签自带内边距

css三大特征
 

继承性：元素继承上一级元素的文字文本相关样式，部分标签自带效果不受影响。

层叠型：其他选择器也对同一元素操作，不同属性可以层叠添加。（不同选择器设置不同效果）

优先级：作用范围越小优先级越大。 id>class>标签名》>继承   （选择器）

居中相关：

text-align:center; 让元素的文本内容居中, 让元素里面的行内元素自身和行内块元素自身居中
margin:0 auto; 让块级元素自身居中

元素定位：：
静态定位
相对定位
绝对定位
固定定位
浮动定位

静态定位
默认的定位方式, 也称为文档流定位
格式: position:static
特点: 元素以左上为基准,块级元素从上往下依次排列, 行内元素从左向右依次排列 ,无法实现层叠效果
如何控制元素的位置? 通过外边距
相对定位
格式: position:relative
特点: 可以实现层叠效果, 元素不脱离文档流(不管元素显示到什么位置 仍然占着原来的位置)
如何控制元素的位置? 通过left/right/top/bottom让元素相对于初始位置做偏移
应用场景: 当需要移动某个元素而其它元素不受影响时使用(元素位置微调)
绝对定位
格式: position:absolute
特点: 可以实现层叠效果, 元素脱离文档流(不占原来的位置)
如何控制元素的位置? 通过left/right/top/bottom让元素相对于窗口或某一个上级元素做位置偏移,如果需要相对于某个上级元素,必须给上级元素设置为相对定位
应用场景: 当需要网页面中添加一个元素, 这个元素不影响其他元素的显示位置时使用绝对定位
固定定位
格式: position:fixed;
特点: 元素固定在窗口的某个位置, 元素脱离文档流
如何控制元素的位置? 通过left/right/top/bottom让元素相对于窗口做位置偏移
应用场景: 当需要将元素固定在窗口某个位置时使用
浮动定位
格式: float:left/right
特点: 元素脱离文档流, 从当前所在行向左或向右浮动,当撞到上级元素边缘或其他浮动元素时停止.
浮动元素一行装不下会自动换行, 换行时有可能被卡住
当元素的所有子元素全部浮动时,自动识别的高度为0,后面的元素会顶上来出现显示异常,给元素添加overflow:hidden解决
应用场景: 当需要将纵向排列的元素改成横向排列时使用

 

 <style>
    #d1{
      width: 50px;height: 200px;
      background-color: red;
        position: absolute;
        /*控制元素的显示层级, 值越大显示越靠前*/
        z-index: 1;
    }
    #d2{
      width: 200px;height: 50px;
      background-color: blue;
        position: absolute;
        z-index: 2;
    }
    #d3{
        width: 200px;
        height: 200px;
        /*设置超出的部分是否显示 hidden隐藏  scroll滚动显示*/
        overflow: scroll;
    }
  </style>

显示层级z-index
当元素修改定位方式时,会出现元素层叠的问题, 通过z-index可以控制层叠的元素谁显示在上面 谁显示在下面
必须改了定位方式之后z-index样式才会生效
z-index值越大显示层级越靠前
溢出设置Overflow
visible(默认): 超出部分显示
hidden: 超出部分隐藏
scroll: 超出部分滚动显示