css 选择器与基本样式

肥牛熟了熟了

已于 2022-09-26 00:21:56 修改

阅读量304

点赞数

分类专栏： html 文章标签： css html 前端

于 2022-09-25 23:07:30 首次发布

本文链接：https://blog.csdn.net/LUOZONGW/article/details/127044841

版权

html 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

css的作用

美化网页效果

css层叠样式表层叠——给一个元素叠加不同的样式

css的引入方式

书写位置

行内样式

写在标签的style属性里
```
<div style="background: red"></div>
```

内部（内嵌）样式

写在style标签中调试页面效果

<head>
    <style>
    .content {
        background: red;
    }
    </style>
</head>

外部（外联）样式

写在格式为.css的文件中通过link标签引用

在项目中运用
```
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
```
权重优先级

谁的优先级高？

行内> 外部？内部外部和内部的优先级与顺序有关遵循就近原则

!important 重要的

css的基本选择器

id选择器 # #username{} 配合js使用，具有唯一性
class类选择器 . .like{} 复用性
通用选择器 * *{} 整个项目中都可以使用
标签选择器 标签名称 div{} 当前页面所有同类的标签有效

区别 ——作用域不同

优先级—— !important > id > class > 标签 > 通用

css的文本属性样式

文本颜色 color的值表现方式：

红色：十六进制#f00 、英文名称 red、rgb数值 rgb(255,0,0)、rgba() a表示透明度

文本大小 font-size的值表现方式：像素单位px em rpx upx vw vh pt

像素单位px 相对于显示器屏幕分辨率而言的
相对单位em 相对于父级的文字大小

相对单位rem 相对于html根元素的文字大小

<style> 
    div{
     font-size: 40px;
     }
     span{
         font-size: 1em; //1em = 40px font-size: 1rem; //1rem = 16px 标签默认大小16px  
     }                    
</style>

css的复合选择器

后代选择器空格 父选择器子选择器{} class id 都可以使用
子代选择器 > 父选择器 >直接子选择器{}

.li01>li只对li有效，对.li01里面的其他值无效
并集选择器 选择器1，选择器2{}
hover伪类选择器 :hover 鼠标悬停效果
结构伪类选择器
1. 匹配父元素中第一个子元素 li:first-child{}
2. 匹配父元素中最后个子元素 li:last-child{}
3. 匹配父元素中第三个子元素 li: nth-child(3){}
  
  找到前5个 -n+5 找到从第5个往后 n+5
4. 匹配父元素中奇数子元素 li: nth-child(odd){} 或者 2n-1 2n+1
5. 匹配父元素中偶数子元素 li: nth-child(even){} 或者2n

背景

背景颜色

backgroud-color : 16进制、英文单词、rgb、rgba() 三原色+透明度

背景图片

backgroud-image : url()

集合写法

backgroud: 颜色 url(../images/car.jpg) 颜色与图片同时在一起

backgroud-clip :content-box; //裁剪

背景大小

backgroud-size: 100%;

背景平铺

backgroud-repeated: no-repeated;

显示模式转换

行内元素 display：inline

同一行内可以显示多个、不可以设置宽高

span a ...
块元素 display：block

独立成行、可以设置宽高

div h p ul li form header nav footer
行内块元素 display：inline-block

同一行显示多个、可以设置宽高

img button textarea select...

块级元素和行内元素之间的嵌套

块元素嵌套行内元素和块级元素

行内元素span 可以嵌套转换后的div 常规情况下不可以例如：p中不可以放div

盒子模型

盒子模型的组成：

内容区域（content）

块元素的默认width：100%；行内元素的默认width：内容的宽度。
边框区域（border）

属性值：粗细、样式、颜色
内边距区域（padding）
外边距区域（margin）

内边距padding：边框与内容区域之间的距离

· padding:10px 上下左右都加10

padding:10px 20px 上下10左右20

padding:10px 20px 30px 上10左右20下30

padding:10px 20px 30px 40px 上10 右20 下30 左40

元素总宽度= 内边距+外边距

border-size:border-box; //减去内外边距只有内容宽度

外间距margin：盒子与盒子之间的距离

顺时针赋值

显示宽度：不包含外间距

外边距合并问题取最大值塌陷

相邻盒子解决办法：

第1种方法：给下面的盒子设置定位（position：absolute；）即可。

第2种方法：给下面的盒子设置浮动（float：left；）即可。

第3种方法：将其中任一个盒子设置为行内块元素（dispaly：inline-block；）即可。

盒子嵌套解决办法：

给下面的盒子设置overflow（ overflow: hidden; 或 overflow: auto; ）即可

浮动

解决块间距问题

float left right

让垂直布局的盒子变成水平布局

清除浮动：

同级元素浮动干扰清除clear:both

父级元素浮动干扰清除：给父元素设置overflow : hidden 或设置固定height（不建议）

浮动的影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

浮动与定位的特点？

所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。

position属性可以控制在何处显示特定的元素。

脱标是指？

标准流：指的是元素排版布局过程中，元素会默认从左往右、从上往下的流式排列方式。前面的内容发生变化后，后面的内容位置也会随着发生变化。

脱标指的就是元素脱离原来的位置，浮动在其他没有设置浮动的元素之上。

定位

让页面中盒子在浏览器的任意位置布局

相对定位 position:relative

相对于上面元素的左下角心飞了人还在原本的位置上

特点：\1. 需要配合方位属性实现移动

\2. 相对于自己原来位置进行移动

\3. 在页面中占位置 → 没有脱标
绝对定位 position:abstract

相对于浏览器的左上角

特点：\1. 需要配合方位属性实现移动

\2. 默认相对于浏览器可视区域进行移动

\3. 在页面中不占位置 → 已经脱标
子绝父相

子元素绝对定位，父元素相对定位