92_JavaWeb_CSS

举报
alexsully 发表于 2021/07/07 18:50:38 2021/07/07
【摘要】 CSS 选择器 属性

CSS 

CSS 是层叠样式表单,是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

选  择  器:浏览器根据"选择器" 决定受 CSS 样式影响的 HTML 元素(标签)  
属性(property):  要改变的样式名,并且每个属性都有一个值。属性和值被冒号分开,形成样式声明(declaration) eg:p{color:blue}
多个声明用分号分开。虽然最后一条声明的 最后可以不加分号(但尽量在每条声明的末尾都加上分号)


CSS 和 HTML 
把css样式写成一个单独的 css文件,再通过 link 标签引入即可复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSSreview</title>
    <!-- 1 把css样式写成一个单独的 css文件,再通过 link 标签引入即可复用-->
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>

<div>div标签1</div>
<span>span标签1</span>

</body>
</html>

选择器&属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSSreview2</title>

    <!--选择器 标签选择器,ID选择器,Class类型选择器,组合选择器-->
    <!-- 1 标签选择器 -->
    <style type="text/css">
        div{
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        span{
            border: 5px dashed  blue;
            color: yellow;
            font-size: 20px;
        }
    </style>
    <!-- 2 ID选择器 -->
    <style type="text/css">
        #id001{
            color: blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        #id002{
            color: red;
            font-size: 20px;
            border: 5px blue dotted ;
        }
    </style>

    <!-- 3 Class类选择器 -->
    <style type="text/css">
        .class01{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }

        .class02{
            color: grey;
            font-size: 26px;
            border: 1px solid red;
        }
    </style>
    <!-- 4 组合选择器 -->
    <style type="text/css">
        .class03 , #id003{
            color: blue;
            font-size: 20px;
            border:  yellow 1px solid;
        }
    </style>


</head>
<body>
    <div>div标签1</div>
    <span>span标签2</span>

    <div id="id002">divID选择1</div>
    <div id="id001">divID选择2</div>

    <div class="class01">div类选择class1</div>
    <span class="class02">span类选择class2</span>

    <div class="class03">div组合选择1</div>
    <span id="id003">span组合选择2</span>
</body>
</html>

css 常用样式 

div{
    color: red;                /*1-颜色*/
    border: 1px yellow solid;  /*2-实线边框*/
    width: 300px;              /*3-宽度*/
    height: 300px;             /*4-高度*/
    background-color: green;    /* 5-背景色*/
    font-size: 30px;      /*6- 字体大小*/
    margin-left: auto;    /*7- 左边缘*/
    margin-right: auto;   /*8- 右边缘*/
    text-align: center;   /*9- 文本居中*/
}

table{
    border: 1px red solid; /* 10-设置边框*/
    border-collapse: collapse;  /*11- 将边框合并*/
}

td{
    border: 1px red solid; 
}

a{
    text-decoration: none; /* 12-超连接去下划线 */
}

ul{
    list-style: none; /*13- 列表去除修饰 */
}

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200