HTML+CSS学习（三）

ifjia

已于 2022-11-04 19:12:06 修改

阅读量192

点赞数

文章标签： css html 学习

于 2022-11-04 19:03:22 首次发布

本文链接：https://blog.csdn.net/ifjia/article/details/127645828

版权

接上一篇

二、主要内容

1、HTML+CSS之拨云见日

CSS

①、CSS选择器

1、标签选择器(TAG选择器）

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

2、群组选择器

css：div，p，span{}
可通过逗号的方式，给多个不同的选择器添加相同的CSS样式来表达代码的复用

例：
 <style>
        div,#text,.title{background: red;}
    </style>
</head>
<body>
    <div>hahah</div>
    <p id="text">haishi1ahha</p>
    <h2 class="title">hahahah</h2>
</body>
</html>

3、通配选择器

*{}
注：尽量避免使用，因为会给所有标签添加样式
使用场景：去掉所有某些标签默认样式

 <style>
       *{border: 1px red solid;}
    </style>
</head>
<body>
   <div>hahah</div>
    <p id="text">haishi1ahha</p>
    <h2 class="title">hahahah</h2>

4、层次选择器

①后代：M N{}

例:
<style>
        #list li{border: 1px red ;}
    </style>

②父子：M>N{}

<style>
        #list>li{border: 1px red solid;}
    </style>

③兄弟: M～N{}
当前M下面所有的N标签

  <style>
        div~h2 {background: red;}
    </style>
</head>
<body>
    <div>hahahhaha</div>
    <p>又是hahahaha</p>
    <h2>hasjj</h2>

④相邻:M+N
当前M相邻的N标签

<style>
        div+p{background: red;}
    </style>
</head>
<body>
    <div>hahahhaha</div>
    <p>又是hahahaha</p>
    <h2>hasjj</h2>
</body>
</html>

5、属性选择器

*注：
=部分匹配
=：完全匹配
^=起始匹配
$=：结束匹配
可多个中括号进行组合匹配

例一：M[attr]
 <style>
      div[class]{background: red;}
    </style>
</head>
<body>
    <div>aaaaa</div>
   <div class="box">hhahhhh</div>     这一行被修饰
   <div class="search">lllllllll</div>  这一行被修饰
</body>
</html>

例二：M[attr*=value]

```<style>
      div[class*=search]{background: red;}
    </style>
</head>
<body>
    <dic>aaaaa</dic>
   <div class="box">hhahhhh</div>
   <div class="search">lllllllll</div>    这一行被修饰
   <div class="search-button">lllllllll</div>     这一行被修饰
</body>
</html>

```html
例三：M[attr=value]
 <style>
      div[class=search]{background: red;}
    </style>
</head>
<body>
    <dic>aaaaa</dic>
   <div class="box">hhahhhh</div>
   <div class="search">lllllllll</div>        这一行被修饰
   <div class="search-button">lllllllll</div>
</body>
</html>

例四：M[attr=^value]
 <style>
      div[class^=search]{background: red;}
    </style>
</head>
<body>
    <dic>aaaaa</dic>
   <div class="box">hhahhhh</div>
   <div class="search">lllllllll</div>     这一行被修饰
   <div class="search-button">lllllllll</div>  这一行被修饰
   <div class="button-search">lllllllll</div>
</body>
</html>

例五：M[attr=$value]
<style>
      div[class$=search]{background: red;}
    </style>
</head>
<body>
    <dic>aaaaa</dic>
   <div class="box">hhahhhh</div>
   <div class="search">lllllllll</div>    这一行被修饰
   <div class="search-button">lllllllll</div>
   <div class="button-search">lllllllll</div>     这一行被修饰
</body>
</html>
例六：M[attr1][attr2]
<style>
      div[class][id]{background: red;}
    </style>
</head>
<body>
    <dic>aaaaa</dic>
   <div class="box" id="elem">hhahhhh</div>    这一行被修饰
   <div class="search">lllllllll</div>
   <div class="search-button">lllllllll</div>
   <div class="button-search">lllllllll</div>
</body>
</html>

6、伪类选择器

用于向某些元素添加特殊效果
一般用于初始样式添加不上的时候，可用伪类选择器添加
M:伪类{}
:link 访问前的样式（只能添加给a标签）
:visited 访问后的样式（只能添加给a标签）
:hover 鼠标移入式的样式（可添加给所有标签）
:active 鼠标按下时样式（可添加给所有标签）
注：
1、如果四个伪类都生效，一定要注意顺序：L V H A
2、一般网站只这样去设置：a{} a：hover{}

 <style>
    div{width:200px; height:100px; background: red;}
    div:hover{background: blue;}
   </style>

 <style>
   a{color:gray}
   a:hover{color:red}
   </style>

:after
<style>
   div::after{content:"world"}
   </style>
</head>
<body>
    <div>hello</div>    world在hello后  before标签相反
</body>
</html>

:after :before 通过伪类方式给元素添加一个文本内涵（使用content属性）
:checkd :disabled :focus（光标）都是针对表单元素的

：checked
 <style>
   :checked{width: 100px;height: 100px;}
   </style>
</head>
<body>
 <input type="checkbox">
 <input type="checkbox" checked>
 <input type="checkbox">

7、结构性伪类选择器

:nth-of-type()、:nth-child()
角标是从1开始的，1表示第一项，2表示第二项 | n值表示从0到无穷大即全部都被修饰
:first-of-type()、:first-child() 第一个被修饰
:last-of-type()、:last-child() 最后一个被修饰
:only-of-type()、:only-child() 只有一个元素时，可被修饰
type：在同类型中 child：在子元素中

li:nth-of-type(1){background: red;}
   </style>
</head>
<body>
 <ul>
    <li></li>    这一行被修饰
    <li></li>
    <li></li>
 </ul>
</body>
</html>

②、CSS样式继承

文字相关的样式可被继承
布局相关的样式不能被继承（默认不能继承,但可设置继承属性 inherit值）
继承:CSS标签内的与文字相关的属性可用来修饰文本

<style>
p{border: inherit;}
</style>
</head>
<body>
<p>hahah</p>   改行可被添加表框：即布局相关的css样式
</body>
</html>

③CSS优先级

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

<style>
  div{color: red;}
  div{color: blue;}
   </style>
</head>
<body>
 <div>hahah1</div> 该文字显示蓝色
 </ul>
</body>
</html>

内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高
单一样式优先级
style行间 > id > class > tag > * > 继承
注：
style行间权重 1000
id 权重 100
class 权重 10
tag 权重 1

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

 <style>
        #elem{color:red; !important }
    </style>
</head>
<body>
    <div id="elem" style="color:blue ;">这是一个块</div>
</body>
</html>

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

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

层次优先级
1、权重比较
ul li; .box p input{} 权重相加比较大小（在相同等级内）
2、约分比较
将两组中相同的标签去掉，将剩余标签的权重进行比较

④、CSS盒子模型

组成:
content——> padding——>border——>margin
物品————充物————包装盒———盒子与盒子之间的间距
content：内容区域 width和height组成

padding：内边距（内填充）（number：30px）
例：padding—left/right/top/bottom（单一样式只能写一个值）
只写一个值是：30px表示上下左右的值
两个值是：30px 40px（上下左右）
写四个值 30px 40px 50px 60px（上右下左）

margin:外边距（外填充）
例：margin—left/right/top/bottom（单一样式只能写一个值）
只写一个值是：30px表示上下左右的值
两个值是：30px 40px（上下左右）
写四个值 30px 40px 50px 60px（上右下左）
注：
1、背景颜色会填充到margin以内的区域（不包括margin区域）
2、文字会在content区域
3、padding不能出现负值，margin是可出现负值

box-sizing
该属性允许您以特定的方式定义匹配某个区域的特定元素
取值为content-box（默认值）| border-box
盒尺寸，可以改变盒子模型的展示形态
border-box ：width、height——>content padding border
使用场景：
1、不用计算一些值
2、解决一些百分比

例：
 <style>
      #box{
        width: 200px; height: 200px;background: red;border: 10px blue solid;
        padding: 30px 50px;
        box-sizing: content-box;
      }
    </style>

⑤、CSS盒子模型的一些问题

margin叠加
当给两个盒子同时添加上下外边距的时候，会出现叠加问题。
此问题，只在上下有，左右没有叠加问题

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

margin传递
margin传递问题只会出现在嵌套的结构中，且只有margin-top会有传递问题，其它三个方向是没有传递问题

解决方案：
1、BFC规范
2、给父容器加边框
3、margin换成padding

⑥、CSS盒子模型扩展

margin自适应居中
左右自适应是可以的，但上下自适应是不可以的
margin-left：auto

不设置content的现象
width，height不设置时，对盒子模型的影响
会自动计算容器大小，节省代码

⑦、标签分类

1、按类型

block：块
div、p、ul、li、h1等
特点;
1、独占一行
2、支持所有样式
3、不写款时与父容器的宽相同
4、所占区域是一个矩形

inline：内联
span、a、em、strong、img等
特点:
1、挨在一起
2、有些样式不支持如：width height margin padding
3、不写宽时，宽度由内容决定（内容多宽就大）
4、所占的区域不一定是矩形
5、内联标签之间会有空隙（原因：换行产生的）

inline-block：内联块
input、select等
特点：
1、挨在起一起，但支持宽高

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

2、按内容

Flow;流内容
Metadata：元数据
Sectioning：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的

3、按显示

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

⑧、显示框类型

display
block(块) inline(内联)
inline-block none(隐藏)
注：display：none与visibility：hidden区别
display：none 不占空间的隐藏
visibility：hidden 占空间的隐藏
例：display：block

⑨、标签嵌套规范

ul,li
dl,dt,dd
table,tr,td
块标签可以嵌套内联标签
快标签不一定能嵌套快标签
内联标签不能嵌套快标签（a标签例外）

错误写法：<spam>
               <div></div>
         </span>
         
特殊：<a href="#">
          <div></div>
     </a>

⑩、溢出隐藏

overflow
visible：默认
hidden：隐藏
scroll：添加滚动条（无论文本是否溢出都有滚动条）
auto：添加滚动条（只有文本溢出时才会自动出现滚动条）
只支持一边：overflow-x/overflow-y 针对两个轴分别设置

⑪、透明度与手势

opacity：0—1
0：透明 1：不透明 0.5：半透明
注:
1、占空间
2、所有字内容也会透明

rgba（0，0,0，1/0）:0—1
注：可以让指定的1样式透明，而不影响其他样式

cursor
default：默认
自定义鼠标样式：准备图片：.cur 、.ico格式

div{cursor:url(./img/cursor.ico),auto;}

⑫、最大、最小宽高

min-width、max-width
min-height、max-height
注：强化对百分比单位的理解
换算：以父容器的大小进行换算
一个容器怎么适应屏幕的高：容器加height：100%；body：100%；html：100%

⑬、CSS默认样式

有些标签有默认样式，有些标签没有默认样式
没有默认样式：div，span等
有默认样式：
body ：marign：8px
h1—h6：marign：上下 21.440px
font-weight：bold
p：marign：上下 16px
ul：marign：上下 16px padding:左 40px
默认点：list-style：disc
a：text-decoration：underline；

⑭、CSS reset

简单的CSS rest：
*{margin:0; padding:0;}
优点：不用考虑那些标签有默认的margin和padding
缺点：稍微的影响性能

ul{list-style:none;} 除去表单的默认点

a{text-decoration:none;color:#666;} 删除链接的下划线

img{display:block;}
问题的现象：图片跟容器底部有一些空隙
原因：内联元素的对齐方式是按照文字基线对齐，而不是文字底线对齐的
vertical-align：baseline；基线对齐方式，默认
问题解决方式：img{vertical-align：bottom}

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

⑮、float浮动

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

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

取值：left right none(默认)

注意点：
1、只会影响后面的元素
2、内容默认提升半层 (文字提升半层）
3、默认宽根据内容决定
4、换行排列
5、主要给块元素添加，但也可以给内联元素添加

利用 clear 属性清除 float 浮动
上下排列：
.clear属性，表示清除浮动
取值：left right both

嵌套排列：
1、固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
2、父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
3、 overflow : hidden ( BFC 规范），如果有子元素想溢出，那么会受到景影响。
4、display : inline - block ( BFC 规范），不推荐，父容器会影响到后面的元素。
5、设置空标签：不推荐，会多頃加一个标签。

6、after 伪类：推荐，是空标签的加强版，目前各大公司的做法。
（clear属性只会操作块，对内联标签不起作用标签）
.clear:after{content:“”}

ifjia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML+CSS学习（三）

**特性：***加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。4、display : inline - block ( BFC 规范），不推荐，父容器会影响到后面的元素。:only-of-type()、:only-child() 只有一个元素时，可被修饰。:first-of-type()、:first-child() 第一个被修饰。:last-of-type()、:last-child() 最后一个被修饰。
复制链接

扫一扫