首页技术正文

css-概述和选择器

程序员艳清技术 2022年11月9日

0 收藏 766 点赞 3,912 浏览 1181 个字

一：CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

二：存在方式

　　存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

　　语法：style = ‘key1:value1;key2:value2;’

在标签中使用 style=’xx:xxx;’
在页面中嵌入 < style type=”text/css”> </style > 块
引入外部css文件

三：选择器

　　1）标签选择器

　　　　div{ }
　　　　<div > </div>

　　2）class选择器

　　　　.bd{ }
　　　　<div class=’bd’> </div>

　　3）id选择器

　　　　#idselect{ }
　　　　<div id=’idselect’ > </div>

　　4）关联选择器

　　　　#idselect p{ }
　　　　<div id=’idselect’ > <p> </p> </div>

　　5）组合选择器

　　　　input,div,p{ }

　　6）属性选择器

　　　　input[type=’text’]{ width:100px; height:200px; }

　　　　PS:
　　　　优先级，标签上style优先，编写顺序，就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{
            background-color: red;
            height: 48px;
        }
        /*.c1{*/
            /*background-color: red;*/
            /*height: 48px;*/
        /*}*/        div{
            background-color: blue;
            height: 48px;
        }
        span div{
            background-color: yellow;
            height: 48px;
        }
        .c1 div{
          background-color: yellow;
            height: 48px;
        }
        input[n="alex"]{
          background-color: yellow;
            height: 48px;
        }
    </style>
</head>
<body>
    <div style="background-color: #2459a2;height:48px">1</div>
    <span>
    <div id="i1">2</div>
        </span>
    <div class="c1">3</div>
    <div id="i1">3</div>    <input type="text" n="alex">
    <input type="password">
</body>
</html>