JavaWeb第二天--CSS

CSS

CSS简述

• CSS是什么？有什么作用？
  
  CSS(Cascading Style Sheets)：层叠样式表。

CSS通常称为CSS样式或层叠样式表。主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽度、边框样式、边距等）以及版式的布局等外观显示样式。

CSS可以使HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更加灵活，更容易绘制出用户需要的结构。

CSS的代码规范

• 放置规范
  
  在<style>标签内容体中书写CSS样式代码，<style>标签放置在标签中。
• 格式规范
  
  选择器名称 {属性名:属性值; 属性名:属性值;......}

选择器：即指定CSS样式作用在哪些HTML标签上。

• 代码规范

• 属性名和属性值之间是键值对关系。
• 属性名和属性值之间用”:“连接，最后”;“结尾。（例如：font-size:10px）
• 如果一个属性名有多个值，多个值之间用空格隔开。（例如：border:5px solid red;）
• CSS注释：/*注释内容*/

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <style>
                span{
                    font-size:120px;
                    color:red;
                    border:1px solid blue;
                }
            </style>
        </head>
        <body>
            <span>111</span>
            <span>222</span>
        </body>
    </html>

CSS选择器

基本选择器

• 元素选择器
  
  HTML标签又名HTML元素。
  
  元素选择器：即以HTML标签名作为选择器名称。
  
  作用：选择CSS样式代码，作用于对应标签上。

• 格式
  
  标签名{ /*CSS样式代码*/ }
• 适用范围：适用于将相同样式作用在多个同名标签上。

• 类选择器
  
  每个HTML标签都有一个class属性，class属性值即为类名。
  
  类选择器：即以HTML的类名（class属性值）作为选择器名称。
  
  作用：选择CSS样式作为代码，作用于对应类名的HTML标签上。

• 格式：
  
  .类名{ /*CSS样式代码*/ }
• 使用范围：适用于将样式一次作用在相同类名的标签上。

• id选择器
  
  每个HTML标签都有一个id属性，id的属性值必须在本页面是唯一的。
  
  id选择器：即以HTML的id（id属性值）作为选择器名称。
  
  作用：选择器CSS样式代码，作用于某个规定id值的HTML标签上。

• 格式：
  
  #id值{ /*CSS样式代码*/ }
  
  *适用范围：适用于将样式作用在某个标签上（更有针对性）。

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <style>
                span{
                    color:blue;
                }
                .div1{
                    border:1px solid red;
                    background-color:yellow;
                }
                #div2{
                    border:1px solid black;
                    background-color:green;
                }
            </style>
        </head>
        <body>
            <span>行内标签<span>
            <div class="div1">块级标签1<div>
            <div id="div2">块级标签2<div >
        </body>
    </html>

基本选择器的组合方式

• 层级关系
  
  标签和标签之间有层级关系，例如<html>标签中的子标签为<body>标签。
  
  我们可以对基本选择器进行组合，表现出层级关系，从而更加针对性地把样式作用于某些标签上。

• 格式：
  
  选择器1 选择器2 ......{ /*CSS样式代码*/ }

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <style>
                div font{
                    color:red;
                }
            </style>
        </head>
        <body>
            <div>
                <font>我想火</font>
            </div>
            <font>我想火火不了</font>
        </body>
    </html>

CSS样式

边框属性

• border
  
  设置边框的样式

• 格式：宽度 样式 颜色。
  
  （例如：1px solid red -> 1像素粗 实线 红色边框）

• width
  
  用于设置标签的宽度。
• height
  
  用于设置标签的高度。
• background-color
  
  用于设置标签的背景颜色。

• 背景颜色设置的两种主流方式：
  
  1.英文单词->例如：red;blue。yellow;
  
  2.颜色代码->例如：#fff。(格式：#红绿蓝，每个颜色用两个16进制位数表示)

布局

• float
  
  通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方向式进行排版，就需要使用浮动属性。

• 格式：选择器{float:属性值;}
• 常用属性值：
  
  none:元素不浮动（默认值）。
  
  left：元素向左浮动。
  
  right：元素向右浮动。

注意事项：因为元素设置浮动属性后，会脱离原有文档流（会脱离原有的版式），从而会影响其他元素的样式，所以设置浮动后，页面样式需要重新调整。

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <style>
                #d1{
                    background-color:red;
                    width:100px;
                    height:100px;
                    float:left;
                }
                #d2{
                    background-color:green;
                    width:110px;
                    height:110px;
                    float:left;
                }
                #d3{
                    background-color:blue;
                    width:120px;
                    height:120px;
                    float:left;
                }
            </style>
        </head>
        <body>
            <div id="d1"></div>
            <div id="d2"></div>
            <div id="d3"></div>
        </body>
    </html>

转换

• display
  
  HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块级元素和行内元素。

• 块元素： 以区域块的方式出现，每个块标签独自占据一整行或多整行，块结束会自动换行。块结束会自动换行。
  
  常见的块元素：<h1>、<p>、<div>、<ul>等。
• 行内元素： 根据内容多少来占用行内空间，不会自动换行。
  
  常见的行内元素：<span>、<a>等。

• display属性可以使得元素在行内元素和块元素之间相互转换。

• 格式：
  
  选择器[display属性值]
• 常用的属性值：
  
  block：此元素将显示为块元素（块元素默认的display属性值）
  
  inline：此元素将显示为行内元素（行内元素默认的display属性值）
  
  none：此元素将被隐藏，不显示，也不占用页面空间。

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <style>
                div{
                    display:inline;
                }
            </style>
        </head>
        <body>
            <div>变为行内元素</div>

            <span>行内元素</span>
        </body>
    </html>

字体

• font-size
  
  用于设置字体的大小。
• color
  
  用于设置字体的颜色。