HTML CSS 层叠样式表一

短命女 2021-09-30 03:02 444阅读 0赞

CSS，全拼Cascading Style Sheets，层叠样式表，用于控制html<body>的元素的样式和布局。

一、CSS的三种引用方式

1.内嵌

内嵌 样式为宽200像素，像素必须加px或者em或者百分比；宽度为200像素；字体颜色为红色；背景颜色为黑色；可以无限添加属性，用分号;隔开。

2习惯上加到<head>里，也可以加到<body>里。

<head>

\*\{                            \*表示所有的，这个控制器会去掉所有元素的内外边距

margin：0px;

padding:0px;

div\{                             标签选择器，通常用于取消<a>标签样式

width:200px;            这个标签选择器会把所有DIV设置成200X200的红色方块。

height:200px;

background-color:red;

\#ID\{           id选择器 会把id为ID的元素改成这个选择器的样式

id选择器的优先级会高一点

.CLASS\{        class选择器 会把class名为CLASS的元素改为这个样式

以上几个选择器比较常用

\#ID span\{  子代选择器 会修改id为ID的标签下的span标签

一般用于修改某个id或者class下的标签

.CLASS1,CLASS2 \{  并列选择器  会修改class为CLASS1和CLASS2的两类标签

可以同时修改多个class的标签

并列选择器还有一种类型     在div的class名中以空格并列多个class名 则该div会执行多个选择器的样式

.c4\{  \}

.c5\{  \}

<div class="c4 c5"></dic> 该DIV应该在<body>内

</style>

</head>

3.从外部引用

引用格式为

在css文件里 不需要加<style>标签，直接写选择器即可。

三种方式的优先级依次降低，直接内嵌在标签里最高，在head里写其次，从外部引用最低。

三、课上练习

/*<style type="text/css" >原则上要加到head里面 type属性的意思是样式表 可以不加*/
            * {                /*  *表示所有的选择器 */
                margin:0px 0px 10px 0px;
                padding:0px;
            }
            div {   /*标签选择器*/
                 width:100px;
                 height:100px;
                 background-color:red;
            }
            #d1 {   /*ID选择器*/
                background-color:blue;
            }
            #d2 span {  /*子代选择器*/
                color:white;
            }
            .c1 {  /*class选择器*/
                background-color:black;
            }
            .c2, .c3 {  /*并列选择器*/
                      background-color:yellow;
            }
            .c4 {
                background-color:cyan;
            }
            .c5 {
                color:red;
            }
        /*</style> 在样式表里面 style是不需要加的 直接写选择器即可*/

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>样式表练习</title>
        <link type="text/css" rel="stylesheet" href="css/css1.css" /> 
        
    </head>
    <body>
        <div style="width:200px;height:100px;background-color:#b2b2b2"></div> 
        
        <div></div>
        <div id="d1"></div>
        <div id="d2">
            <span>浮生半日闲</span>
        </div>
        <span>浮生半日闲</span>
        <div class="c1"></div>
        <div class="c2">C2</div>
        <div class="c3">C3</div>
        <div class="c4 c5">蝶魂</div>
        
    </body>

四、效果图

![1159200-20170526111402810-2104862850.png][]

转载于:https://www.cnblogs.com/shenyuyaqing/p/6904751.html

[1159200-20170526111402810-2104862850.png]: /images/20210725/6b9896c8e7694140a7148c41341caf1e.png