[JavaWeb开发中]常用CSS的8方法速学

你去把唐僧师徒除掉

已于 2022-03-15 17:42:48 修改

阅读量1.5k

点赞数

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

于 2022-03-13 23:26:37 首次发布

本文链接：https://blog.csdn.net/weixin_45364220/article/details/123437840

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.引入方式

1.行内样式

优点： 写在单个标签里，针对性最强
缺点： 不能写得太复杂

这种写法优先级最高，因此会覆盖其它样式

<p style="color:red; font-size:30px">hello</p>

2.内部样式表

写在style标签里，嵌入到html中
一般来说style放在哪里都可以，但习惯性放在head标签里
优点： 做到内容和样式分离
缺点： 分离的不够彻底

<style> p{
	color:red;
	font-size:20px;
}
</style>
<p>hello</p>

3.外部样式表

优点： 确实彻底分离了
缺点： 受浏览器影响，可能不一定立刻生效

普通的 F5 刷新不一定有用，可用 ctrl+F5 进行强制刷新就会生效

<link rel="stylesheet" href="./style.css">
<p class="red">hello</p>

样式的大小写虽然不区分，但习惯用小写
冒号后有空格，选择器和 { 之间有空格

2.选择器总类

1.基础选择器

1.标签选择器

<style> p{
	color:red;
	font-size:20px;
}
</style>
<p>hello</p>

2.类选择器

<p class="red size sheep">hello</p>

如果引用多个类选择器，则每个类选择器之间用空格分割

3.id选择器

<p id="one">hello</p>

4.通配符选择器

*{
    padding: 0px;
    margin: 0px;
}

2.复合选择器

1.后代选择器

<style>
   ol li{
       color: green;
   }
   ol.one li a{
       color: red;
   }
</style>

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<ol class="one">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li><a href="#">ddd</a></li>
</ol>

在这里插入图片描述

后代选择器是基础选择器的多种组合，可获取子代，子代的子代等只要匹配都可以全部获取
ol.one li a：意思是先找到一个标签为 ol 且类名为 one 这样的元素，然后再在里面找到 li 标签，在找到 a 标签

2.子选择器

<style>
   ol li{
       color: green;
   }
   ol.one>a{
       color: red;
   }
</style>

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<ol class="one">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li><a href="#">ddd</a></li>
</ol>

在这里插入图片描述

子代选择器之选择自己的亲儿子元素，不选择孙子元素
ol.one>a：在找到类名为 one 的 ol标签，在 ol 的亲儿子标签中找 a 标签，发现全是 li 标签，因此没有设置其属性

练习：

把小猫换成红色字体
<div class="cat">
    <ul>
        <li><a href="#">小猫</a></li>
        <li><a href="#">小猫</a></li>
        <li><a href="#">小猫</a></li>
    </ul>
</div>

答案
.cat ul li a { color: red;}

把小猫换成红色字体
<div class="cat">
	<a href="#">小猫</a>
    <ul>
        <li><a href="#">小狗</a></li>
        <li><a href="#">小鸟</a></li>
    </ul>
</div>

答案
.cat>a { color: red;}

3.并集选择器

同时针对两个元素一起设置

<style>
    div,
    h3,
    li{
        color: red;
    }
</style>

<div>苹果</div>
<h3>香蕉</h3>
<ul>
    <li>鸭梨</li>
    <li>橙子</li>
</ul>

在这里插入图片描述

4.伪类选择器

1.链接伪类选择器

<style>
/* 未访问 */
a:link {
    color: black;
}

/* 已经访问过 */
a:visited {
    color: green;
}

/* 鼠标悬停未点击 */
a:hover {
    color: red;
}

/* 鼠标点击没有松 */
a:active {
    color: grey;
}
</style>

<a href="https:aaa.html">小猫</a>

有了hover 和 active 属性之后就可以设置一些有意思的交互

<style>
input:active {
	color: white;
	background-color: orange;
}
</style>
<input type="button" value="按钮">

在这里插入图片描述

3.字体属性

1.字体样式

<style>
.font-family .one{
    font-family: "微软雅黑";
}
.font-family .two{
    font-family: "宋体";
}
</style>

<div class="font-family">
    <div class="one">微软雅黑</div>
    <div class="two">宋体</div>
</div>

2.字体大小

p{
	font-size: 20px;
}

3.字体粗细

p{
	font-weight: 700;
}

用具体数值即可
取值范围：100～900
400:nomal；700:bold

4.字体样式

<style>
	em{
		font-style: normal;
    }
</style>

<em>这一个em标签</em>

更多的是把斜体改为正常

5.字体颜色表示四种方式

color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.7);

数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色，0, 0, 0表示黑色
当时用 rgba 的时候，最后一个参数就是透明度的意思【数值越大越不透明；数值越小越透明】

6.文字对齐

<style>
.text_left{
    text-align: left;
}
.text_center{
    text-align: center;
}
.text_right{
    text-align: right;
}
</style>

7.文本装饰

<style>
text-decoration:xxx

underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线.
overline 上划线. [不常用]
line-through 删除线 [不常用]
</style>

例如 B 站这里的导航链接, 就是使用这个属性去的掉的下划线. [可以 F12 观察]

8.首行缩进

<style>
	text-indent: [值];
</style>

控制段落的首行缩进 (其他行不影响)

9.行高

<style>
	line-height: [值];
</style>

行高指的是上下文本行之间的基线距离
HTML 中展示文字涉及到这几个基准线：

顶线
中线
基线 (相当于英语四线格的倒数第二条线) 底线
内容区:底线和顶线包裹的区域，即下图深灰色背景区域

<style>
	.line-height .one { line-height: 40px; font-size: 16px;
}
</style>
<div class="line-height">
	<div>
		上一行
	</div>
    <div class="one">
		中间行
	</div>
	<div>
		下一行
    </div>
</div>

在这里插入图片描述
查看行高

注意1: 行高 = 上边距 + 下边距 + 字体大小
注意2: 行高等与元素高度, 就可以实现文字居中对齐.

<style>
	.line-height {
		color:white;
        background-color: black;
        line-height: 400px;
        height: 400px;
        font-size: 100px;
    }
</style>

<div class="line-height">
    垂直居中
</div>

在这里插入图片描述

4.背景

1.背景色

<style>
	.bgc {
		color:white;/*字体颜色*/
        background-color: black;/*背景颜色*/
    }
</style>

2.背景图

<style>
	div{
        width: 800px;
        height: 700px;
        background-image: url(./Flower.jpg);
        background-repeat: no-repeat;
        /* background-position:  25% 50%; */
        /* background-position: center bottom; */
        background-size: contain;
    }
</style>

url：路径不需要双引号
repeat：平铺方向
position：定位【左手系坐标轴】
size：cover：图片会超过设置的800px，700px；contain：只会在规定范围内显示图片
一般用 background-image 替代 img 标签的使用

4.圆角矩形

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: green;
        border-radius: 50%;
    }
</style>

<div>一个矩形</div>

在这里插入图片描述

border-radius: length;
length：值越大，弧度越大【画圆只需要设置正方形边长的一半即可】

5.元素的显示模式

HTML元素有的独占一行：行内元素，有的独占一块：块级元素

行内元素：相当于一段文字

不独占一行
高度宽度行高都是不能控制的（只是把里面的文字给包裹上）
左右外边距是有效的，上下外边距无效，内边距都有效
默认宽度就是里面的文字本身
行内元素里面只能容纳文本或者其他元素，一般不建议再放块级元素

块级元素：相当于一个盒子

独占一行
高度宽度，内外边距，行高都是可以控制的
宽度默认是父元素的100%
内部可以嵌套块级元素和行内元素

还有一种典型的就是行内块元素：既有行内元素特征又有快捷元素特征

img：不独占一行还可以设置尺寸

<style>
	display:inline;/* 行内元素：很少用 */
	display: block;/* 块级元素：很常用 */
	display:inline-block;/* 行内块元素 */
</style>

6.盒模型概念

边框 border-
内容 content-
内边距 padding
外边距 margin

**margin：**盒子边框和其它盒子边框之间的距离
**padding：**盒子边框和盒子自己内部内容的距离

<style>
    div{
        width: 300px;
        height:300px;
        background-color: green;
        border: 20px solid red;
    }
</style>

1.边框会撑大盒子

此时我们发现宽高都是340px
在这里插入图片描述
我们看看盒模型

原来边框的 20px 把把盒子撑大了，所以上下倒置高度340px；左右导致340px

如何解决呢？

<style>
    div{
        width: 300px;
        height:300px;
        background-color: green;
        border: 20px solid red;
        box-sizing: border-box;
    }
</style>

可以设置一个 border-box 属性就可以放置边框撑大盒子
在这里插入图片描述

一般使用的时候会使用通配符进行全局设置
*{box-sizing: border-box;}

2.内边距

<style>
	div{
       width: 300px;
        height:300px;
        background-color: green;
        border: 20px solid red;
        box-sizing: border-box;
        padding: 100px 50px 25px 12px;/*上 右 下 左：顺时针方向*/
    }
</style>

在这里插入图片描述
可以看到test文字距离div边框的上左下右【复合写法的顺时针】边距

3.外边距

<style>
    div{
        width: 300px;
        height:300px;
        background-color: green;
    }
    .first{
        width: 100px;
        height:100px;
        background-color: red;
        margin: 50px 40px 30px 20px;
    }
</style>
<div>
    <div class="first"></div>
</div>

在这里插入图片描述

在这里插入图片描述
由于红色在绿色内部，红色要距离外边框50px所以会带动绿色一起下移
如果把父类的标签设置padding属性，就会使子标签在父标签内部移动

<style>
    div{
        width: 300px;
        height:300px;
        background-color: green;
        padding: 50px 40px 30px 20px;
    }
    .first{
        width: 100px;
        height:100px;
        background-color: red;
    }
</style>
<div>
    <div class="first"></div>
</div>

在这里插入图片描述

4.取出浏览器默认样式

<style>
	*{
		marign: 0;
		padding: 0;
	}
</style>

7.弹性布局

<style>
  div {
        width: 100%;
        height: 150px;
        background-color: red;
    }

    div>span {
        background-color: green;
    }
</style>

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

此时效果为
在这里插入图片描述
div属性加上display:flex之后效果：紧挨在一起

div属性再加上justify-content: space-around之后的效果：子元素水平方向上平分父元素空间

把 justify-content: space-around; 改为 justify-content: flex-end; 可以看到此时三个元素在右侧显示了
在这里插入图片描述
把 justify-content: flex-end; 改为 justify-content: space-between; 效果：子元素紧挨父元素左右边界在水平方向上平分剩余空间

1.flex布局概念

本质上是给父标签设置好flex 之后再针对其子标签进行排版的方式

2.基础概念

被设置为 display:flex 属性的元素, 称为 flex container
它的所有子元素立刻称为了该容器的成员, 称为 flex item
flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效.

3. justify-content

设置主轴上的子元素排列方式.

使用之前一定要确定好主轴是哪个方向

属性值

值	描述
flex-start	子元素在父元素开始
flex-end	子元素在父元素末尾
center	子元素在父元素中间紧挨着
space-around	子元素水平方向上平分父元素空间
space-between	子元素紧挨父元素左右边界在水平方向上平分剩余空间

4. align-items

<style>
    div {
        width: 100%;
        height: 150px;
        background-color: red;
        display: flex;
        justify-content: space-around;
        align-items: stretch;
    }

    div>span {
        background-color: green;
        width: 100px;
    }
</style>

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

加上**align-items: stretch;**之后效果：自元素被拉伸为父元素的最大高度
在这里插入图片描述

加上align-items: flex-start;属性后：垂直方向上从上开始

把align-items: flex-start; 改为 center 之后效果：垂直方向上居中
在这里插入图片描述

设置侧轴上的子元素排列方式.
属性值

值	描述
stretch	这个是 align-content 的默认值. 意思是如果子元素没有被显式指定高度, 那么就会填充满父元素的高度.
flex-start	弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴结束边界
center	弹性盒子元素在该行的侧轴上居中放置

注意:

align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents

8. 常见的“圣杯”模型

在这里插入图片描述

<style>
   .header,
   .footer {
       width: 50%;
       height: 50;
       background-color: green;
   }

   .body {
       width: 50%;
       height: 400px;
       background-color: blue;
       display: flex;
       justify-content: space-between;
   }

   .body .left {
       width: 100px;
       height: 100%;
       background-color: red;
   }

   .body .middle {
       width: calc(100% - 200px);
       height: 100%;
       background-color: orange;
   }

   .body .right {
       width: 100px;
       height: 100%;
       background-color: grey;
   }
</style>

<div class="header">上方区域</div>
<div class="body">
   <div class="left">左侧导航</div>
   <div class="middle">中间区域</div>
   <div class="right">右侧导航</div>
</div>
<div class="footer">下方区域</div>