HTML+CSS复习：二

最新推荐文章于 2024-08-06 21:40:45 发布

self_correction

最新推荐文章于 2024-08-06 21:40:45 发布

阅读量80

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/self_correction/article/details/128477567

版权

二十四、选择器

为什么要用选择器?
要使用CSS对HTML页面中的元素实现一对一，一对多或
者多对一的控制，这就需要用到CSS选择器

<1>.标签选择器(元素)

    <style>
        div{background-color: red;}
        p{background-color: green;}
    </style>
</head>
<body>
    <div>111111</div>
    <p>12341</p>
</body>

<2>.类选择器(class)

语法: class名{属性: 属性值;}
说明:
A)当我们使用class选择符时，应先为每个元素定义一个class名称
B) class选择符的语法格式是:
如: <div class="top"> </div>
.top{width:200px; height:100px; background:green;}
用法: class选择符更适合定义一类样式;

    <style>
        .index{background-color: red;}
        .connent{background-color: aqua;}
        .fonts{color: blue;}
    </style>
</head>
<body>
    <div class="index fonts">11</div>
    <div  class="connent ">22</div>
    <div>33</div>
    <div class="index">44</div>
    <div class="connent">55</div>
    <div>66</div>
</body>

<3>.id选择器（id）

语法: #id名{属性:属性值;}
说明:
A)当我们使用id选择符时，应该为每个元素定义-个id属性
如: <div id="box"> </div>
B) id选择符的语法格式是"#"加上自定义的id名
如: #box{width:300px; height:300px;}
C)起名时要取英文名，不能用关键字: (所有的标记和属性都是关键字)
如: head标记
D)一个id名称只能对应文档中-个具体的元素对象。(唯一性)

    <style>
        #box1{background-color: aqua;}
        #box2{background-color: blue;}
        #box3{background-color: deeppink;}
    </style>
</head>
<body>
    <div id="box1">11111111</div>
    <div id="box2">22222222</div>
    <div id="box3">33333333</div>
</body>

<4>.通配选择器

语法: *{属性: 属性值; }
说明:通配选择符的写法是“*”，其含义就是所有元素。
*{margin:0; padding:0;}代表清除所有元素的默认边距值和填充值;

<5>.群组选择器

语法:选择符1,选择符2,选择3....属性:属性值;} 例: #top1,#nav1, h1 {width:960px;}
说明:当有多个选择符应用相同的声明时，可以将选择符用“,”分隔的方式，合并为一组。
margin:O auto;实现盒子的水平居中

    <style>
        div , p , h1{background-color: yellow;}
    </style>
</head>
<body>
    <div>
        11111
        <p>11111111111</p>
    </div>
    <p>11111</p>
    <h1>11111</h1>
</body>

<6>.后代选择器

语法:选择符1选择符2 {属性:属性值;}
说明:含义就是选择符1中包含的所有选择符2;
用法:当我的元素存在父级元素的时候,我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。

    <style>
        div p{background-color: red;}
    </style>
</head>
<body>
        <div>
        11111
        <p>11111111111</p>
    </div>
    <p>22222222</p>
    <h1>11111</h1>
</body>

<7>.伪类选择器

语法:
a:link{属性:属性值;}超链接的初始状态;
a:visited{属性:属性值;}超链接被访问后的状态;
a:hover{属性:属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性:属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
Link--visited--hover--active。
说明: 
A)当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为:
a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
B)为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中;
例如: a{color:red;} a:hover{color:green;}表示超链接的初始和访问过后的状态一样, 鼠标划过的状态和点击时的状态一样。

    <style>
        /* 访问之前 */
        a:link{color: green;}
        /* 访问之后 */
        a:visited{color: red;}
        /* 鼠标移上时 */
        a:hover{color: blue;}
        /* 点击激活 */
        a:active{color: aqua;}
    </style>
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
</body>

二十五、选择器的权重

当多个选择器，选中的是同一个元素，且都为他们定义了样式，
如果属性发生冲突了，会选择权重高的来执行
id>class>元素

    <style>
        #box1{background-color: blue;}
        div{background-color: red;}
        .index{background-color: aqua;}
        /* @important>内联>id>class>元素（后代看情况，为后代选择器的权重之和） */
        p{background-color: orange;}
        div p{background-color: deeppink;}
        div .connent{background-color: lightcoral;}
    </style>
</head>
<body>
    <div class="index" id="box1" style="background-color:black">
        11111111111111111111
        <p class="connent">22222222222</p>
    </div>
    <p>33333333333333333</p>
</body>

二十六、文本属性

<1>.大小和字体

1.font-size:字体大小，单位是px,)浏览器默认是16px，设计图常用字号是12px
2.font-family:字体,当字体是中文字体、英文字体中有空格时，需加双引号;
多个字体中间用逗号链接，先解析第1个字体如果没有解析第2个字体，以此类推

<2>.文字颜色

color:颜色,color.red; color.:#ff0; color:rgb(255,0,0); 0-255

<3>.加粗与倾斜

1.font-weight:加粗
font-weight:bolder(更粗的)/bold (加粗) /normal (常 规)
font-weight: 100-900; 100- 500不加粗600- 900加粗

2.font-style:倾斜
font- style: italic(斜体字)/oblique(更倾斜)/normal (常规显示) ;

<4>.文本水平对齐和单行文本垂直居中

1.text-align:文本水平对齐
text-align:left;水平靠左
text-align:right; 水平靠右
text-align:center; 水平居中
text-align:justify;水平2端对齐，但是只对多行起作用。

2.line-height:行高，line-height的数据=height的数据，可以实现单行文本垂直居中

    <style>
        .box1{
            /* right,left,center */
            text-align: center;
            width: 500px;
            background-color: yellow;
        }
        .box2{
            /* justify多行文本中的两端对齐 */
            text-align: justify;
            width: 500px;
            background-color: blue;
        }
        .box3{
            width: 500px;
            height: 100px;
            line-height: 100px;
            background-color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box1">hello world!</div>
    <p class="box2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ex id alias, illum neque quis sequi minima, porro rerum ut eaque animi voluptatibus labore atque magnam maxime vitae ullam cumque?
    </p>
    <div class="box3">大家好</div>
</body>

<5>.间距和首行缩进

1.text-indent:首行缩进,text-indent可以取负值; text- indent属性只对第一行起作用
2.letter-spacing:字间距,控制文字和文字之间的间距(汉字)
3.word-spacing(英文)

    <style>
        .p1{
            letter-spacing: 20px;
        }
        .p2{
            word-spacing: 20px;
        }
        .p3{
            /* text-indent: 32px; */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p class="p1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est, ut provident praesentium eveniet impedit consectetur voluptas ipsum nesciunt obcaecati officia esse animi veritatis, possimus velit iste laboriosam. Ut, accusamus sunt.</p>
    <p class="p2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est, ut provident praesentium eveniet impedit consectetur voluptas ipsum nesciunt obcaecati officia esse animi veritatis, possimus velit iste laboriosam. Ut, accusamus sunt.</p>
    <p class="p3">   
        HTML5最大特色之一就是 支持音频视频,在通过增加了audio、video两个标签来实现对多媒体中的音频、 视频使用的
        支持，只要在Web网页中嵌入这两个标签，而无需第三方插件(如Flash) 就可以实现音视频的播放功能。HTML5对音频、 视频
        文件的支持使得浏览器摆脱了对插件的依赖，加快了页面的加载速度，扩展了互联网多媒体技术的发展空间。</p>
</body>

<6>.文本修饰线

text-decoration:文本修饰,text-decoration:none没有/underline下划线/overline.上划线/line- through删除线

    <style>
        p{
            text-decoration: underline line-through overline;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati accusamus ratione vero dolores reprehenderit excepturi in placeat error corporis tenetur perferendis animi doloremque, voluptate fugiat ipsa! Commodi error sit doloremque.</p>
</body>

<7>.检索大小写和font

    <style>
        /* text-transform 大小写 */
        p{
            /* text-transform: capitalize;
            text-transform: lowercase;
            text-transform: none; */
            font: italic bold 20px 微软雅黑;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, facilis ex. Veniam nisi facere enim expedita, delectus laudantium culpa perspiciatis voluptatum, eaque quibusdam labore, aliquam excepturi optio tempore repudiandae mollitia!</p>
</body>

二十七、列表属性

list-style-type:定义列表符合样式,
list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉
符号)

list-style-image:将图片设置为列表符合样式,list-style-image:url();

list-style position 设置列表项标记的放置位置。
list-style-position: outside; 列表的外面默认值
list-style-position: inside; 列表的里面
list-style:none;去除列表符号

    <title>Document</title>
    <style>
        ul{
            list-style: disc;
            /* disc  实心圆
            circle空心圆
            square实心正方形 */
            list-style-image: url();
        }
    </style>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</body>

二十八、背景属性

<1>. 基本标签

1.background-color:背景颜色,background-color: red;
2.background-image:背景图片,background-image:url();
3.background-repeat:背景图片的平铺,background-repeat:no-repeat/repeat/repeat x/repeat-y;
4.background-position:背景图片的定位
background-position:水平位置,垂直位置;可以给负值\

    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: red;
            background-image: url();
            background-repeat: no-repeat;
            /* 
            repeat:默认平铺 
            repeat-x:x轴平铺 
            repeat-y:y轴平铺 
            no-repeat:不平铺 
            */
            background-position: 20px 20px;
            /* 
            1. 20px  20px   
            2. 10% 10%
            3. left right center
               top  center bottom
            */
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgba(0, 0, 0 ,0.4);
        }
    </style>
</head>
<body>
    <div class="box1">
        大家好
        <div class="box2"></div>
    </div>
</body>

<2>.图片大小

    <style>
        .box1{
            background-size: 100% 100%;
            background-size: cover;
            /* 
            1.400px 400px   
            2.50% 100%
            3. cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
            也许无法显示在背景定位区域中。
            contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区
            域。铺不满盒子，留白

            */
        }
    </style>
</head>
<body>
    <div class="box1">
        大家好
        <div class="box2"></div>
    </div>
</body>

<3>.背景的固定和滚动

background -attachment:背景图片的固定,
background-attachment : scroll (滚动)/ fixed 
(固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了) ;

    <style>
        .box1{
            background-color: blue;
            background-image: url();
            background-repeat: no-repeat;
            width: 300px;
            height: 3000px;
            background-attachment: fixed;
            margin: auto;
        }
    </style>
</head>
<body>
        <div class="box1">
        大家好
        <div class="box2"></div>
    </div>
</body>

<4>.图片的复合属性

2.顺序可以换
3.可以只取一个值，放在后面能覆盖前面的值
4.backg-size属性只能单独用

二十八、float浮动

1.float: left; 元素靠左边浮动
2.float: right;元素靠右边浮动
3.float: none;元素不浮动
浮动的作用1:定义网页中其它文本如何环绕该元素显示
浮动的作用2:就是让竖着的东西横着来

二十九、清除float浮动

1.添加固定高度
2.清浮动
Clear: none;
允许有浮动对象
Clear: right;
不允许右边有浮动对象
Clear: left;
不允许左边有浮动对象
Clear:both;不允许有浮动对象
清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。
3.当前浮动元素后面补一个盒子，不设置宽高，clear : both
4.overflow:hidden 让浮动元素计算高度

三十、盒子模型

盒子模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义
所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容
区、这就是盒模型
padding-方向:top bottom left right
border:solid(实线) double(双实线) dashed（线段线）dotted(点状线) 
背景色可以蔓延到边框
margin是支持负值的
注：屏幕居中：margin:0 auto;