HTML+CSS自用知识点（第三周）

最新推荐文章于 2023-07-12 10:43:27 发布

Whnist

最新推荐文章于 2023-07-12 10:43:27 发布

阅读量496

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/Meg_Fu/article/details/127595261

版权

HTML+CSS自用知识点

拨云见日篇（续）

拨云见日篇（续）

二十一、CSS选择器

1、ID选择器

CSS:#elem() HTML:id=“elem”
注：
1.在一个页面中，ID值是唯一的。
2.命名规范，字母 _ - 数字(命名的第一位不能是数字)。
3.命名方式：
驼峰式：searchButton（小驼峰）SearchButton（大驼峰，不建议）
下划线式：search_small_buttom
短线式：search-small-buttom
在这里插入图片描述

2、CLASS选择器

css：.elem{}
html：class = “elem”
注：
1.class选择器是可以复用的。
2.可以添加多个class样式。
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
4.标签+类的写法

3、标签选择器(TAG选择器)

css：div{} html：<div></div>
使用的场景:
1，去掉某些标签的默认样式时
2。复杂的选择器中,如层次选择器

4、群组选择器（分组选择器）

css：div , p , span{}
例

 <style>
 div , #text , .title{ background: red;}
 </style>

可以通过逗号的方式，给多个不同的选择器添加CSS样式，来达到代码的复用。

5、通配选择器

*{ } -> div , ul , li , p , h1 , h2 …{ }
（注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。）/
使用场景：
1.去掉所有标签的默认样式时可以使用。

6、层次选择器

后代：M N
父子：M > N
兄弟：M ~ N（当前M下面所有的兄弟N标签）
相邻：M + N（当前M相邻下面的N标签）

例（后代）

    <title>Document</title>
    <style>
    #list li{ border:1px solid; }  /* 在ul下寻找li */
    </style>
</head>
<body>
    <ul id="#list">
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
</html>

例（父子）

    <title>Document</title>
    <style>
    #list > li{ border:1px solid; }  /* 在ul下寻找li */
    </style>
</head>
<body>
    <ul id="#list">
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
</html>

7、属性选择器

M[attar] {}
= ：完全匹配
* = ：部分匹配
^= ：起始匹配
￥= ：结束匹配
[][][] ：组合匹配
例：

    <style>
    /* div[class=box]{ background:red;} */ 
    /* div[class][id]{ background:red;}(两个中括号可以同时纳入筛选) */
    div[class*=box]{ background:red;} /* 加*号可以使带有box的都能被选中 */
    </style>
</head>
<body>
    <div>111</div>
    <div class="box">222</div>
    <div class="box-buttom">233</div>
    <div class="search">333</div>
</body>
</html>

在这里插入图片描述

8、伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。

1.伪类第一部分

M ：伪类{}
:link 访问前的样式（只能添加给a标签）
:visited 访问后的样式（只能添加给a标签））
:hover 鼠标移入时的样式（可以添加给所有标签）
:active 鼠标按下时的样式
注：
1.link visited只能给a标签加，hover和active可以给所有的标签加。
2.如果四个伪类都生效，一定要注意顺序:L V H A。
3.一般网站只这样去设置:a{}:hover{}。
例一：（鼠标）

    <title>Document</title>
    <style>
    div{ width:200px;height:200px;background:red;}
    div:hover{background:blue}
    div:active{background:green}
    </style>

例二：（访问）

    <style>
    a:link{ color:red ;}
    a:visited{ color:blue ;}
    a:hover{ color:green ;}
    a:active{ color: yellow;}
    </style>
</head>
<body>
    <a href="#">一个连接</a>
</body>
</html>

注：
一般网站都只设置
a{} ( link visited active ) a:hover{}

2.伪类第二部分

:after、:before 通过伪类方式给元素添加一段文本内容，使用content属性

    <style>
	div:after{content:"world";color:red;}
    </style>
</head>
<body>   <!-- 方便文本分开进行上色 -->
    <div>hello</div>
</body>
</html>

:checked、:disable、:focus 都是针对表单元素的

    <style>
	:disable{width:100px;height:100px;} /* 不选择时呈现的样子 */
	:focus{ background:red} /* 选中后表单的颜色 */
    </style> 
</head>
<body>  
    <input type="checkbox">
    <input type="checkbox" checked> <!-- 默认选中状态 -->
    <input type="checkbox">
</body>
</html>

3.伪类第三部分

:nth-of-type()、:nth-child()
（角标从1开始，1表示第一项；n值表示从0开始到无穷）
:first-of-type、:first-child （第一行）
:last-of-type、 :last-child （最后一行）
:only-of-type、:only-child （只有一个）

type：类型
child：孩子

    <style>
    li:nth-of-type(3){background:red;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <div></div>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

*type只会在<li>中选择某一个。
*child会在全部里选某一个，但是<div>不会有效果。

二十二、CSS样式继承

文字相关的样式可以被继承（颜色，字形，大小等）
布局相关的样式不能被继承（边框，宽高等）（默认不能继承，但可以设置继承属性 inherit值）

二十三、CSS优先级

1、一部分

相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

单一样式优先级
style行间 > id > class > tag > * > 继承
例：（#elem > .box > div > * > 继承）
style行间权重 1000
id 权重 100
class 权重10
tag 权重 1

2、二部分

!important
提升样式优先级，非规范方式，不建议使用。

标签+类与单类
标签+类 > 单类

div.box{color:blue;}   /* 标签+类 */

群组优先类
群组选择器与单一选择器的优先级相同，靠后写的优先级高。

div,p{color:blue}  /* 群组 */

3、层次优先级（建议三层以内）

1.权重比较
ul li .box p input{}（1+1+10+1+1）（数字为等级，不能越级）
.hello span #elem{}（10+1+100）

2.约分比较
ul li .box p input{}
.hello span #elem{}
（同种类型相约分，如.box和.hello约掉）

二十四、CSS盒子模型

1、一部分

组成：content -> padding -> border -> margin
类比成物品填充物包装盒子与盒子之间距离

content ：内容区域 width和height组成的

padding ：内边距（内填充）
只写一个值：30px
写两个值：30px 40px（上下、左右）
写四个值：30px 40px 50px 60px（上、右、下、左）

单一样式只能写一个值
padding-left
padding-right
padding-top
padding-bottom

margin ：外边距（外填充）
只写一个值：30px
写两个值：30px 40px（上下、左右）
写四个值：30px 40px 50px 60px（上、右、下、左）

单一样式只能写一个值
padding-left
padding-right
padding-top
padding-bottom

注：
1.背景颜色会填充到margin以内的区域。
2.文字会在content区域。
3. padding不能出现负值，margin是可以出现负值。
在这里插入图片描述
例：

    <style>
    #box{
        width:200px; height:200px; background:red; border:10px /* transparent solid */;
        padding : 30px 50px;
        margin: 10px;
    }
    #box2{ width:200px; height :200px; background:Oblack; color:white;}
    </style>
</head>
<body>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
</body>
</html>

2、box-sizing

盒尺寸，可以改变盒子模型的展示形态。
默认值：content-box ：width、 height -> content
border-box : width、 height -> content padding border （宽高分配给三个类型）

例：

    <style>
    #box{
        width:200px; height:200px; background:red; border:10px blue solid;
        padding : 30px 50px;
        box-sizing: border-box; /* 省去计算 */
    }
    input{ width:100%; padding: 30px;box-sizing: border-box;}
    </style>
</head>
<body>
    <div id="box1">盒子1</div>
    <input type="text">
</body>
</html>

使用的场景：
1.不用再去计算一些值
2.解决一些10B%的问题

3、盒子模型的一些问题

1.maegin叠加

当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的。
1.margin叠加间题,出现在上下margin同时存在的时候，会取上下中值较大的作为叠加的值。
例：

    <style>
    #box1{width:200px; height:200px; background:red;margin-bottom: 30px;}
    #box2{width:200px; height:200px; background:blue;margin-top: 30px;}
    </style>                             <!-- 上下边距不会进行累加，而是叠加，谁大用谁的值 -->
</head>
<body>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
</body>
</html>

解决方案:
1.BFC规范
2.想办法只给一个元素添加间距。

2.maegin传递

margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。
解决方案:
1.BFC规范
2.给父容器加边框。
3.margin换成padding。

4、margin扩展

1.margin自适应：
margin左右自适应是可以的，上下自适应则不行。
2.不设置content现象：
width、height不设置的情况下，对盒子模型的影响，会自动去计算容器的大小，省去部分代码。

设置时：
设置高宽的时候
不设置：
不设置宽高时候

二十五、盒子嵌套例子

    <style>
    #box1{width:350px; height:350px; border:1px black dashed;padding:27px;}
    #box2{border: 5px #d7effe solid;padding:20px;}
    #box3{background: #ffa0df;padding:40px;}
    #box4{border: 1px white dashed;padding:3px;}
    #box5{border: 1px white dashed;padding:49px;}
    #box6{width:100px; height:100px; background:#96ff38;border:#fcff00 5px solid;}
    </style>                             
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5">
                        <div id="box6"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

效果图：

二十六、标签分类

1、按类型

block ：div、p、ul、li、/h1 …
1、一个块独占一行
2、支持所有样式
3、不写宽的时候，跟父元素的宽一样
4、所占区域是一个矩形

inline ：span、a、em、strong、img …
1、挨在一起的（不独占一行）
2、有些样式不支持，例如：width、height、marign、padding
3、不写宽的时候，宽由内容决定
4、所占的区域不一定是矩形
5、内联标签之间有空隙，是换行原因引起的（可以将font-size:0放在body里来解决，后面样式再添加回字原来的大小font-size:xxx）

inline-block ：input、select …
1、挨在一起，且支持宽高

注：布局一般用块标签，修饰文本一般用内联标签

2、按内容

Flcw :流内容
Metadata :元数据
Sectioning :分区
Heading :标题
Phrasing :措辞
Embedded:嵌入的
Interactive :互动的
内容图

3、按显示

替换元素:浏览器根据元素的标签和属性，来决定元素的具体显示内容。
img、input …
非替换元素:将内容直接告诉浏览器，将其显示出来。
div、h1、p …

二十七、显示框类型

display：
block
inline
inline-block
none
（区别：dispaly:none 不占空间的隐藏）
（ visibility:hidden 占空间的隐藏）

	<style>
    div{width: 100px;height: 100px;background: red;display: inline-block;}
    </style>

二十八、标签嵌套规范

ul、li
di、dt、dd
table、tr、td
1、块能够嵌套内联

<div>
	<span></span><a href="#"></a>
</div>

2、块嵌套块

<div>
	<div></div>
</div>

特殊;
（错误的写法）

<p>
	<div></div>
</p>

3、内联是不能嵌套块
(错误的写法)

<span>
	<div></div>
</span>

特殊:
(正确的写法)

<a href="#">
	<div></div>
</a>

（a里面不能再写a）

二十九、溢出隐藏

overflow：
visible :默认
hidden
scroll（一直显示滚动条）
auto（字多的时候显示滚动条）
x轴、y轴

<style>
    div{width: 100px;height: 100px;border:1px black solid;overflow:hidden;}
    </style>

三十、透明度与手势

opacity:
opacity: 0（透明，占空间）~1（不透明）、0.5（半透明）
注：
占空间，所有的子内容也会透明

rgba
rgba() : 0~1
注：
可以让指定的样式透明，而不影响其他样式

cursor : 手势
default : 默认手势
要实现自定义手势：
准备图片： .cur 、.ico （ur(图片地址),auto;）

三十一、最大、最小宽高

min-width、min-height（扩）
max-width、max-height（缩）
注：强化对百分比的理解
%单位：换算 ->以父容器的大小进行换算的

（一个容器怎么适应屏幕的高：肉鳍加height：100%； body%； html：100%）

三十二、CSS默认样式

有些标签有默认样式，有些标签没有默认样式。

没有默认样式:
div、span、…

有默认样式:
body、h1…h6、p、ul、…

body -> marign : 8px
h1 -> marign : 上下 21.440px
p -> marign : 上下 19px
ul -> marign : 上下 16px padding ：左 40px
默认点：list-style : disc
a -> text-decoration: underline;

三十三、CSS重置样式（reset）

简单的CSS reset :
*{ margin:0; padding:0; }
ul{ list-style:none; }
a{ text-decoration:none; color:#666; }
img{ display:block; }

CSS reset :
margin:e; padding:e;}
优点:不用考虑哪些标签有默认的margin和padding
缺点:稍微的影响性能
body,p,h1,ul{ margin:0; padding:0; }

1.ul{ list-style : none;}

2.a{ text-decoration: none; color:#999;}

3.img{ dispaly:block }
问题的现象:图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的,而不是文字底线对齐的。
vertical-align: baseline;基线对齐方式，默认值
img{ vertical-align:bottom;}解决方式是推荐的
常见的CSS reset
在这里插入图片描述

*写具体页面的时候或一个布局效果的时候;
1，写结构
2. css重置样式
3. 写具体样式

三十四、float浮动

1、float浮动概念

文档流
文档流是文档中可显示对象在排列时所占用的位置。

float特性
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

float取值
left
right
none(默认)

例：

    <style>
    body{ border:1px black solid; }
    #box1{ width: 100px;height: 100px; background:yellow; float: left;}
    #box2{ width: 200px;height: 200px; background:red; float: left;}
    </style>                             
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

2、float注意点

1.只会影响后面的元素。

    <style>
    body{ border:1px black solid; }
    #box1{ width: 100px;height: 100px; background:yellow;}
    #box2{ width: 200px;height: 200px; background:red; float: left;}
    #box3{ width: 200px;height: 200px; background:blue;}
    </style>                             
    </style>                             
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

在这里插入图片描述

2.内容默认提升半层。
（不被覆盖）

3.默认宽根据内容决定。
（例如：文字长度）

4.换行排列。
（浮动元素放不下会折行，第二行元素可能会被第一行元素挡住而不会顶到最左边）

5.主要给块元素添加，但也可以给内联元素添加。

3、清除float浮动

上下排列：
clear属性，表示清除浮动的，left、right、both(全部)

    <style>
    #box1{ width: 100px;height: 100px; background:yellow;float: left;}
    #box2{ width: 200px;height: 200px; background:red;clear: both;}
    </style>                             
    </style>                             
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

嵌套排列:
固定宽饰 : 不推荐，不能把高度固定死，不适合做自适应的效果。
父元素浮动 : 不推荐，因为父容器浮动也会影响到后面的元素。
overflow : hidden (BFC规范)，如果有子元素想溢出，那么会受到影响。
display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
设置空标签 : 不推荐,会多添加一个标签。
after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。
（clear属性只会操作快标签，对内联标签不起作用）

例（after伪类）：

    <style>
    #box1{ width: 100px;border: 1px black solid}
    #box2{ width: 200px;height: 200px; background:red;float: left;}
    .clear::after{content:'';clear:both;display: block;}
    </style>                             
    </style>                             
<body>
    <div id="box1" class="clear">
        <div id="box2"></div>
    </div>
</body>
</html>

4、float制作页面小结构

样本图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{ margin: 0; padding: 0;}
    ul{list-style: none;}
    img{display: block;}
    a{ text-decoration: none;color: #666}
        h1,h2,h3{font-size: 160px};
    .l{float: left;}
    .r{float: right;}
    .clear :after{ content:"";display: block;clear: both;}

    #main{width: 366px;margin: 20px auto;}
    #main .title{height: 23px;line-height:23px ;font-size: 12px;font-weight: bold;padding: left 30px;
        background: url(图片地址1) no-repeat 6px 4px, url(图片地址2) repeat-x ;
    }                     /* 先写的在上面 */
    #main ul{ overflow: hidden;margin-top: 13px; }
    #main li{ margin-bottom: 22px; }
    #main .pic{ width: 100px; border:1px soled #c8c4d3; margin-left: 5px;}
    #main .pic img{ margin:2px; }
    #main .content{ width: 240px; font-size: 12px; line-height: 20px;}
    #main .content h2{ font-size: 12px; line-height: 24px; }
    #main .content p{ font-size: 12px; line-height: 20px; }
    </style>                             
    </style>                             
<body>
    <div id="main">
        <h2>外媒评论精选</h2>
        <ul>
            <li>
                <div class="1 pic">
                    <a href="#">
                        <img src="图片地址1" alt="">
                    </a>
                </div>
                <div class="1 content">
                    <h2>测试标题</h2>
                    <p>
                        测试段落测试段落测试段落测试段落。。。。。。
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li>
                <div class="1 pic">
                    <a href="#">
                        <img src="图片地址2" alt="">
                    </a>
                </div>
                <div class="1 content">
                    <h2>测试标题</h2>
                    <p>
                        测试段落测试段落测试段落测试段落。。。。。。
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li>
                <div class="1 pic">
                    <a href="#">
                        <img src="图片地址3" alt="">
                    </a>
                </div>
                <div class="1 content">
                    <h2>测试标题</h2>
                    <p>
                        测试段落测试段落测试段落测试段落。。。。。。
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

Whnist

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML+CSS自用知识点（第三周）

CSS:#elem() HTML:id=“elem”注： 1.在一个页面中，ID值是唯一的。 2.命名规范，字母 _ - 数字(命名的第一位不能是数字)。 3.命名方式：驼峰式：searchButton（小驼峰）SearchButton（大驼峰，不建议）下划线式：search_small_buttom 短线式：search-small-buttom css：.elem{}html：class = “elem”注：1.class选择器是可以复用的。2.可以添
复制链接

扫一扫