css基础学习（2）

最新推荐文章于 2023-06-24 18:45:39 发布

黄大帅@lz

最新推荐文章于 2023-06-24 18:45:39 发布

阅读量280

点赞数

分类专栏：前端（html+css+js）文章标签： css 学习前端

本文链接：https://blog.csdn.net/gua_Piter/article/details/127642312

版权

前端（html+css+js）专栏收录该内容

36 篇文章 0 订阅

订阅专栏

css基础学习（2）

一 css选择器

一 css选择器

1.1 标签选择器

div{ }, ∠div>∠/div>
使用场景：

去掉某些默认样式
复杂的选择器

1.2群组选择器（分组选择器）

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

1.3 通配选择器

*{ }–> 即：div，ul，p，h1{ }
**> 注意：

尽量避免使用通配选择器，因为会给所有的标签全部带上这个性质，慎用。
通常用来去掉所有标签的默认样式；**

1.4 层次选择器

父子 M>N { }


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #first>p
    {
        color: blueviolet;
    }
    </style>
</head>
<body>
    <div id="first">
        <p>子元素</p>
        <p>子元素</p>
        <div id="second">
            <p>子元素的子元素</p>
            <p>子元素的子元素</p>
        </div>
        <p>子元素</p>
        <p>子元素</p>
    </div>
</body>
</html>

在这里插入图片描述

后代 M N { }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #first p
    {
        color: blueviolet;
    }
    </style>
</head>
<body>
    <div id="first">
        <p>子元素</p>
        <p>子元素</p>
        <div id="second">
            <p>子元素的子元素</p>
            <p>子元素的子元素</p>
        </div>
        <p>子元素</p>
        <p>子元素</p>
    </div>
</body>
</html>

在这里插入图片描述

兄弟 M~N { } 当前M下面的所以兄弟N标签
在这里插入图片描述

相邻 M + N{ } 当前M下面相邻的N标签
在这里插入图片描述

1.5属性选择器

在这里插入图片描述

M[ attr] { }
= : 完全匹配
*= ：部分匹配
^=：起始匹配
$= : 结束匹配
[ ] [ ] [ ]：组合匹配

/* 选择 div 下的 p 标签的 class 属性值为 blue 的元素 */
div p[class="blue"] {
	background: blue;
}

<div>
  <p class="blue">p 标签</p>
  <p class="blue red">p 标签</p>
  <p class="blue">p 标签</p>
</div>

在这里插入图片描述

.box a[class *= "download"]{
	color: red;
}
<div class="box">
	<a href="#" class="download">下载</a>
	<a href="#" class="musicdownload">下载</a>
	<a href="#" class="downloadmovie">下载</a>
	<a href="#" class="image-download">下载</a>
	<a href="#" class="flast download">下载</a>
</div>

在这里插入图片描述

.box a[class ~= "download"] {
	color: yellow;
}

在这里插入图片描述

.box a[class |= "download"] {
	color: skyblue;
	font-size: 20px;
}
<div class="box">
	<a href="#" class="download">下载2</a>
	<a href="#" class="music download">下载2</a>
	<a href="#" class="image-download">下载2</a>
	<a href="#" class="download-image">下载2</a>
	<a href="#" class="downloadmovie">下载2</a>
</div>

在这里插入图片描述

.box a[class ^= "download"] {
	color: pink;
}

在这里插入图片描述

.box a[class $= "download"]{
	color: orange;
}

在这里插入图片描述

1.6 伪类选择器

1. css伪类用于某些元素添加的效果。一般用于初始样式添加不上的时候，用伪类来添加
：link； ：visited；：hover；：active

注意：

link，visited只能给a标签加，hover和active可以给所有标签
如果四个伪类都生效，一定要注意顺序：L V H A.
一般网站只能这样设置：a{ } :hover{ }.

<style>
    /* a:link{color:aqua} */
     a:visited{ color:blueviolet}
    a:hover{color:pink}
    a:active{color:burlywood} 
</style>
<body>
    <a href="./1.jpg.jpg">下载</a>
    <a href="./2.jpg.jpg ">下</a>
    <a href="./(19)自己做的小作业.html ">厉害哦</a>
</body>
</html>

2.结构伪类选择器

nth-of-type(角标) nth-child(角标)
角标是从一开始的，1表示第一项，2表示第二项 n表示0~无穷
first-of-type
last-of-type
only-of-type

nth-of-type() 和nth-of-child()区别
type：类型
child：孩子

1.7 css优先级

相同样式优先级
当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式,那么后写的引入方式优先级高。
单一样式优先级
style行间>id>class>tag>*>继承
id权重100
class权重10
tag权重1
!important
提升样式优先级，非规范方式，不建议使用。(不能针对继承的属性进行优先级的提升)
标签+类与单类
标签+类>单类
群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高。
层次优先级

权重比较 ul li .box p input { } 1 +1 +10 +1 +1
.hello span #telem { } 10 +1 + 100
约分比较
ul li .box p inputli { } p input{(}.
hello span elem { } #elem{}

1.8 css盒子模型

组成: content（物品） -> padding（填充物） -> border（包装盒） -> margin（盒子与盒子之间的间距）

1**.content **内容区域width和height组成的

padding :内边距(内填充)
只写一个值:30px(上下左右)
写两个值: 30px 4opx(上下、左右)
写四个值: 30px 4opx 5opx 6opx(上、右、下、左)
单一样式只能写一个值:
padding-leftpadding-rightpadding-toppadding-bottom
**margin **外边距(外填充)
只写一个值: 3opx(上下左右)
写两个值: 30px 4opx(上下、左右)
写四个值: 30px 40px 50px 60px（上、右、下、左)
单一样式只能写一个值:
padding-left
padding-right
padding-top
padding-bottom

注意：
1.背景色填充到margin以内的区域（不包括margin）
2. 文字在centent区域添加。
3. padding不能为负数，而margin可以为负数

在这里插入图片描述

style>
       
       #box1{ 
            width:400px; height:400px; background:pink; border:10px yellow solid;
            padding : 100px;
            margin: 10px;
       }
       #box2{
            width:200px ;height:200px; background: yellowgreen; 
       }
    </style>
</head>
<body>
    <div id="box1">这是盒子<img src="./1.jpg.jpg"widht="400px"height="400px"></div>
    <div id="box2">盒子二号<img src="./2.jpg.jpg" width="150px"height="150px"></div>

box-sizing:
盒尺寸，可以改变盒子模型的展示形态。
默认值:content-box : width、height ->content
border-box : width、height ->content padding border

使用的场景:
1。不用再去计算一些值
2。解决一些100%的问题I

margin叠加

当给两个盒子同时添加上下外边距的时候，就会出现叠加问题。这个问题，只有上下会出现，而左右不会有这个叠加问题。

解决方案：

给父容器加边框
把夫容器中加入padding，删掉margin。

注意：

margin左右自适应是可以的，但上下自适应是不行的
width，height不设置的时候，对盒子模式的影响不大

1.9 标签的分类

一，. 按类型：

1. block: div, p, ul , li , h1……
特性：
@      独占一行；
@     支持所有样式
@     不写宽的时候，与父元素相同
@     所占区域是一个矩形

inline:span , a, em , strong, img ……
特性
@     欸在一起的
@     有些样式不支持，eg：width，height ， margin ，padding
@     不写宽的时候，与内容决定
@      所占区域不一定是矩形
@     内联标签之间会有空隙，原因：换行产生的

inline-block ：input ，select……
@ 欸在一起，支持宽高
@ 包含块和内联的特性

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

二，按内容
在这里插入图片描述
相关代码网站地址：https://www.w3.org/TR/htm15/dom.html
三，按显示
display : block , inline , inline-block none……

区别：
display：none 不占空间的隐藏
visibility：hidden 占空间隐藏

    div{width:100px; height: 100px; background: greenyellow;
                display: inline-block;
            }
            span{width:100px; height:100px; background:gray;
                  display: inline-block;  
            }
            /* input{display: none;} */
        </style>
    </head>

<body>
    <div>这是一个小快</div>
    <span>这是内联</span>
    <input type="text">
</body>

1.10标签嵌套规范

ul、lidl、dt、ddtable、tr、 td

块能够嵌套内联

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

块嵌套块

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

特殊:
错误的写法:

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

内联是不能嵌套块

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

内联是不能嵌套块
错误的写法

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

特殊:
正确的写法:<a href="#"><div></div></a>

1.11 溢出隐藏

overflow :
      visible :默认hidden
      scrollautox轴、y轴
      overflow-x、overflow-y针对两个轴分别设置

主要是解决超出边框的字处理方式

 <style>
        div{border:2px solid red;width:200px; height: 200px;overflow:auto ;}
    </style>
</head>
<body>
    <div>哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </div>

在这里插入图片描述

1.12 cursor :手势

default :默认箭头要实现自定义手势:
要实现自定义手势：

准备图片:.cur . .ico
cursor : url(./img/ cursor.ico) ,auto;

1.13 ．最大、最小宽高

min-width、min-height max-width、 max-height

%单位:换算–>已父容器的大小进行换算的

一个容器怎么适应屏幕的高︰容器加height:100%; body:100%;html:100%;

html, body{ height: 100%;} .contrainer{ height : 100%;}

1.14.CSS默认样式?

没有默认样式的:div、span
有默认样式的:
    body ->marign : 8px
    h1 -> margin : 上下 21.440px
    font-weight : boldp->margin : 上下 16px
    ul ->margin :上下16px padding : 左 4o款
    默认点: list-style : disc
    a ->text-decoration: underline;

1.15css reset :

*{margin:0; padding:o;}
    优点:不用考虑哪些标签有默认的margin和padding
    缺点:稍微的影响性能
    body,p,h1,ul{ margin:0; padding:o;} ul{list-style : none;}

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

** img{ dispaly:block}**
    问题的现象:
        1. 图片跟容器底部有一些空隙。
        2.内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
        3.vertical-align: baseline;基线对齐方式，默认值
        4.img{ vertical-align:bottom;}解决方式是推荐的

写具体页面的时候或一个布局效果的时候:
1，写结构
2. css重置样式
3.写具体样式
css初始化设置

1.16 float浮动

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

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

3. float取值
leftright
none(默认)

float注意点
    只会影响后面的元素。内容默认提升半层。
    默认宽根据内容决定。
    换行排列。
    主要给块元素添加，但也可以给内联元素添加。

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

在这里插入图片描述
如何清除浮动：

上下排列:clear属性，表示清除浮动的，left、right、 both

    嵌套排列:

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

<!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>
    /*#box1{ width: 10opx; height:100px; background:red; float:left;}#box2{ width:200px; height:200px; background: blue; clear:both; }*//*#box1{ width:200px; border: 1px black solid;}
    #box2{ width: 100px; height: 20opx; background:red; float:left;}.clear{ clear:both;}*/
    #box1{ width : 200px; border: 1px black solid;}
    #box2{ width:100px; height:200px; background: red; float:left;}
    .clear:after{ content:' ' ; clear : both; display: block; }
    </style>
</head>
<body>
    <!-- <div id="box1 "></div><div id="box2"></div>  <div id="box1">
    <div id="box2"></div><div class="clear"></div></div>
    aaaaaaa -->
    <div id="box1" class="clear">
        <div id="box2"></div>
    </div>
    aaaaaaa
</body>
</html>

黄大帅@lz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css基础学习（2）

div{ }, ∠div>∠/div>使用场景：*{ }–> 即：div，ul，p，h1{ }**> 注意：父子 M>N { }后代 M N { }兄弟 M~N { } 当前M下面的所以兄弟N标签相邻 M + N{ } 当前M下面相邻的N标签1. css伪类用于某些元素添加的效果。一般用于初始样式添加不上的时候，用伪类来添加：link；：visited；：hover；：active2.结构伪类选择器组成: content（物品） -> padding（填充
复制链接

扫一扫