java web 28 : CSS

在HTML中引入CSS

1.通过style属性引入css

　　style="属性名:属性值;属性名:属性值;"

　　不推荐这种方式，标签复杂可读性差，难以将css代码分离

2.将所有css代码写在style标签内部

　　初步实现将css代码和html分离

　　可以实现代码复用

　　不能跨文件生效

3.用单独的文件保存css代码，通过link标签引入

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        span{
            border: 2px solid lawngreen;
            font-size: 30px;
            font-weight: bolder; /* 字体加粗 */
        }
    </style>
    
    <link rel="stylesheet" type="text/css" href="./css/test05.css"/>
    
</head>
<body>
    <!-- 
        1.通过标签上的style属性给div设置样式 
        边框:2px solid red 
        字体大小:26px
        背景颜色为:pink
    -->
    <div style="border: 2px solid #FF0000;
        font-size: 26px;
        background-color: pink;">
        这是一个div...
    </div>
    <br/>
    
    
    <!-- 2.通过style标签给span设置样式如下： 
        边框: 2px solid green
        字体大小: 30px
        字体加粗
    -->
    <span>span111</span>
    <span>span222</span>
    <span>span333</span>
    <br/>
    
    
    <!-- 3.通过link标签引入外部的css文件，为p元素设置样式如下： 
        边框: 2px solid blue;
        字体颜色:red
        字体设置为楷体
        设置首行文本缩进40px
    -->
    <p>这是一个p标签p1</p>
    <p>这是一个p标签p2<br>这是一个p标签p2</p>
    <p>这是一个p标签p3</p>
    
</body>
</html>
/* "./css/test05.css" */
@charset "utf-8";
p{
    border: 2px solid blue;
    color: red;
    font-family: "楷体";
    text-indent: 40px; /* 文本首行缩进 */
}

 ************************************************************************************************

CSS选择器

1.标签名选择器

　　标签名{

　　　　属性: 属性值;

　　}

2.类选择器

　　.class值{

　　　　属性: 属性值;

　　}

　　在标签中 class="class值" 即可完成分组

3.id选择器

　　#id值{

　　　　属性: 属性值;

　　}

4.后代选择器

　　父标签  子标签{

　　　　属性: 属性值;

　　}

　　标签1,标签2{

　　　　属性: 属性值;

　　}  /* 选中所有的标签1和标签2元素 */

5.属性选择器

　　标签[ 符合条件的属性: 属性值]{

　　　　属性: 属性值;

　　}

 

同种选择器相同属性重复赋值时：

　　写在后面的会覆盖写在前面的

不同种选择器设置优先级：

　　id选择器>类选择器>元素名选择器

<!DOCTYPE HTML>
<html>
<head>
<title>CSS选择器示例</title>
<meta charset="UTF-8" />
<style type="text/css" >
    /* 为了看着方便给所有标签都加上边框，及设置一些默认的样式 */
    body,input{font-size:18px;}
    input{border: 2px solid green;}
    div,span,p{border: 2px solid red;font-size:18px;}
    span{border-color: blue;margin-right:10px;}
    div,p{ width:350px;height:80px;padding:5px;}
    /* ----- 1.标签名选择器练习 -----
    将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
    span{
        background-color: #efbdef;
        font-size: 22px;
        font-weight: bolder; /* 字体加粗 */
    }

    /* ----- 2.类选择器练习 -----
    (1)将div和p标签下之外的所有span的背景颜色设置为#faf77b，边框改为2px solid cyan；
    (2)将div下的span和内容为"span2"的span，背景颜色设置为#5eff1e、字体颜色设置
    #ec0e7e；*/
    .s1{
        background-color: #faf77b;
        border: 2px solid cyan;
    }
    .s2{
        background-color: #5eff1e;
        color: #ec0e7e;
    }    /* 重复赋值时后者覆盖前者 */

    /* ----- 3.id选择器练习 -----
    用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/
    #p1{
        font-size: 24px;
        color: #a06649;
        text-indent: 20px;
    }

    /* ----- 4.后代选择器练习 -----
    为p元素内部的所有span元素，设置字体大小为18px,字体颜色为白色,背景颜色为黑色;*/
    p span{
        font-size: 18px;
        color: white;
        background-color: black;
    }

    /* ----- 5.属性选择器 -----
    为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进15px；*/
    input[type="text"]{
        background-color: #FF7CCC;
        font-size: 22px;
        text-indent: 15px;
    }
</style>
</head>
<body>
    <div>
        div1<span class="s2">span1</span>这是一个div
    </div>
    <br/>

    <div>
        div2<span class="s2">span2</span>这是一个div
    </div>
    <br/>

    <span class="s1">spanA</span>
    <span class="s1 s2">spanB</span>
    <span class="s1">spanC</span>

    <p id="p1">
        p1<span>span4</span>这是一个P元素
    </p>
    <p>
        p2<span>span5</span>这是一个P元素
    </p>
    <input type="text" value="用户名" />
    <input type="button" value="按钮1" />
    <input type="button" value="按钮2" />
</body>
</html>

 

posted @ 2020-07-29 12:05  Saturn5  阅读(33)  评论(0)    收藏  举报