JavaWeb--CSS基础

梦想成为光头强！

已于 2022-02-08 13:22:25 修改

阅读量1.2k

点赞数

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

于 2022-02-06 19:22:39 首次发布

本文链接：https://blog.csdn.net/weixin_53860901/article/details/122731737

版权

JavaWeb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一丶CSS简介

CSS就是层叠样式表，是一种描述HTML文档样式的语言。其描述应该如何现实HTML元素，它节省了大量的工作。

二丶引入方式

1.style标签的方式/内部样式表

它是写在style标签中，嵌入到html的内部，虽然说style放在哪里都可以，但是规范来写一般都是放在head标签当中的。

$\color{red}{写法}$
在这里插入图片描述
$\color{red}{展现效果}$

在这里插入图片描述
对于内部样式表来说，这种引入方式虽然可以让样式和页面结构分离，但是分离的不够彻底，尤其是css内容变得多的时候。

2.html标签当中style属性/行内样式表

这种方式使用过style属性，来指定某个标签的样式。这种写法优先级较高，所以不能写太过于复杂的样式，不然很容易造成覆盖。

$\color{red}{写法}$
在这里插入图片描述

$\color{red}{展现效果}$

在这里插入图片描述

3.外部样式表

这种方式我们实际开放当中，用到的也是最多的。具体方式：

1.创建一个css文件
2.使用link标签引入css

$\color{red}{写法}$

在这里插入图片描述

在这里插入图片描述
$\color{red}{展现效果}$

三丶选择器

选择器是用来选中页面指定的标签元素。

基础选择器

<1>标签选择器

这种选择器，会把所有选择器指定的标签都设置为选择器设置的样式。虽然很简便，但是没有差异性。

<style>
p {
    color: red;
}
</style>

<p>1111111111</p>
<p>2222222222</p>
<p>3333333333</p>

写在hmtl文件里如下：
在这里插入图片描述
网页上展示如下：

<2>类选择器

标签可以设置多个class类，中间用空格间隔，一个class类，可以使用在多个标签当中。语法如下：

<style>
    .blue {
        color: blue;
   }
</style>
<div class="blue">咬人猫</div>
<div>咬人猫</div

编辑器书写如下：
在这里插入图片描述
页面展示如下：

这种写法有一些地方是需要我们注意的：

1.类名用 . 开头的
2.下方的标签使用 class 属性来调用.
3.一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
4.如果是长的类名, 可以使用 - 分割.
5.不要使用纯数字, 或者中文, 以及标签名来命名类名.

<3>id选择器

id选择器和类选择器类似，使用方法也大致是一样的。

<style>
    #ha {
        color: red;
   }
</style>
<div id="ha">蛤蛤蛤</div>

VS中书写如下：
在这里插入图片描述

实际展示效果如下：
在这里插入图片描述
关于id选择器需要注意一下：

1.CSS 中使用 # 开头表示 id 选择器
2.id 选择器的值和 html 中某个元素的 id 值相同
3.html 的元素 id 不必带 #
4.id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)

<4>通配符选择器

这种选择器一般在特殊情况下使用，用来选择所有的标签。他会使用" * "来选择所有的标签。

* {
 color: red;
}

具体在VS中书写如下：
在这里插入图片描述
实现效果如下：

<5>总结

在这里插入图片描述

复合选择器

<1>后代选择器

元素1 元素2 {样式声明}

这里元素1和元素2使用空格分割，元素1是父级，元素2是子级，只选取元素2，不影响元素1。

在VS中书写如下：
在这里插入图片描述
具体展现效果：

如果想要把水果底下黑色字体也改为红色，那么这里的

ul li{
	color:red
}
改为：
li{
	color:red	
}

<2>子选择器

子选择器和后代选择器类似，但是只能选择子标签，只选亲儿子，不选孙子元素。

元素1>元素2 { 样式声明 }
/*注释：这里是使用 > 号来进行分割的*/

这里特别来实验一下二者的区别，如果我们使用后代选择器的写法：
在这里插入图片描述
这里后代都会变成红色。

但是如果我们使用了子选择器的写法，因为子选择器只能选择自己的亲孩子，不对孙子影响。

所以这里最后的显示如下：

<3> 并集选择器

并集选择器是用来选择多组标签。（集体声明）
我们在使用中，要注意如下的点：

通过逗号分割多个元素
表示同时选中元素一和元素二
任何基础选择器都可以使用并集选择器
并集选择器建议竖着写，每个选择器占一行（最后一个选择器不能加逗号）

在VS中书写如下：
在这里插入图片描述

在网页中的具体展现效果如下：
在这里插入图片描述
这里我们想要谁呈现红色，就把它往里面加就可以，但是注意格式，它是竖着写的。

<4> 伪类选择器

伪类选择器主要有四种

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)

然后书写也很容易，如图：
在这里插入图片描述
在网页中显示如下：

然后就会有我们设置的四个样式。
但是这里有个小问题，就是我们实验完毕之后，第二次打开还是我们第一次点击之后的样式，这里我们需要清除我们的浏览记录。然后就会恢复如初了。

<5>focus伪类选择器

这个选择器作用是获取焦点的元素设置样式，失去焦点后，会还原为原有的样式。

VS中书写如下：
在这里插入图片描述

在网页上显示的话就是我们正在输入的框为红色，其他的不输入的或者输入完毕的都为黑色。

在这里插入图片描述

四丶常用元素属性

字体属性 + 文本属性

这一部分的话就先写理论知识，然后代码单独拉一个板块来展示。

<1>设置字体

我们可以在网页中使用自己喜欢的字体，当然这里就不展示有那些了，读者们可以在CSS手册查询。
我们在设置字体的时候，需要注意这些地方。

1.字体名称可以用中文, 但是不建议.
2.多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
3.如果字体名有空格, 使用引号包裹.
4.建议使用常见字体, 否则兼容性不好.

具体设置如下：

 font-family: '微软雅黑';
 font-family: 'Microsoft YaHei';

<2> 大小

我们在HTML中学习了字体设置就是用h1~h6来进行设置，那么我们在CSS中也是有着属于自己的方式来进行设置的。

  font-size: 20px;

这里也是有些地方需要我们注意的

1.不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)
2.可以给 body 标签使用 font-size
3.要注意单位 px 不要忘记.
4.标题标签需要单独指定大小

<3>粗细

格式如下：

 font-weight: bold;
 font-weight: 700;

这里注意啦！

1.可以使用数字表示粗细.
2.700 =bold, 400 是不变粗, = normal
3.取值范围是 100 -> 900

<4>倾斜

格式如下：

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

<5>文本颜色

所有的颜色都是由三原色构成，计算机里也是如此，根据三原色的不同比例，混合出了五彩斑斓的颜色。

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

<6>文本对齐

控制文字水平方向的对齐.

text-align: [值];

这里的值有三个：

center: 居中对齐
left: 左对齐
right: 右对齐

<7>文本装饰

文本装饰有四种方式：

text-decoration: [值];

这里的四种方式就是取决于值是什么

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

<8>文本缩进

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

text-indent: [值];

这里的值就是缩进的多少，这个由我们自己决定。

单位可以使用 px 或者 em.
使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了

<9>行高

行高指的是上下文本行之间的基线距离

HTML 中展示文字涉及到这几个基准线:
1.顶线
2.中线
3.基线 (相当于英语四线格的倒数第二条线)
4.底线

写法如下：

line-height: [值];

这里需要注意了！

1.行高 = 上边距 + 下边距 + 字体大小
2.行高也可以取 normal 等值
3.行高等与元素高度, 就可以实现文字居中对齐

文本相关代码

<!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>字体</title>
    <style>
        #s1{
            /*设置字体*/
            font-family: 'Microsoft YaHei';
            /*设置字体大小*/
            font-size: 40px;
            /*字体粗细 100 ~900 数值或者bold粗体*/
            font-weight: 100;
            /*字体倾斜加italic，normal正常*/
            font-style: italic;
            /*设置字体颜色*/
            color:red;

        }
        #s2{
            /*设置字体*/
            font-family: '宋体';
            /*设置字体大小*/
            font-size: 20px;
            /*字体粗细*/
            font-weight: 900;
            /*字体倾斜*/
            font-style: normal;/*所以这玩意加不加有啥用处，没用处呀*/
            /*设置字体颜色*/
            color:rgb(255,0,0);
        }
        /*文本对齐方式*/
        #d1{
            text-align: left;
        }
        #d2{
            text-align: center;
        }
        #d3{
            text-align: right;
        }
    </style>
</head>
<body>
    <!--这里是id选择器的写法-->
    <span id="s1">
        微软雅黑
    </span>
    <span id="s2">
        宋体
    </span>
    <div id='d1'>靠左</div>
    <div id='d2'>居中</div>
    <div id='d3'>靠右</div>
    <div>
        <p style="text-decoration: none;">啥都没有</p>
        <p style="text-decoration: overline;">上划线</p>
        <p style="text-decoration: line-through;">删除线</p>
        <p style="text-decoration: underline;">下划线</p>
    </div>
    <p style="text-indent: 2em;">首行向右缩进两个文字</p>
    <p style="text-indent: -2em;">首行向左缩进两个文字</p>
    <!--文本占据的高度，注意文本上边和下边可能有空白区域-->
    <div style="line-height:60px; font-size: 40px;">看看行高60px,字体40px的效果</div>
    <div style="line-height:60px; font-size: 60px;">看看行高60px,字体60px的效果</div>
</body>
</html>

对应的显示效果如下
在这里插入图片描述

背景属性

背景相关的代码也同上。

<1>背景颜色

background-color: [指定颜色]

这里的颜色设置同上文本颜色设置

<2>背景图片

background-image: url(...);

这里有几个点需要注意的

url 不要遗漏.

url 可以是绝对路径, 也可以是相对路径
url 上可以加引号, 也可以不加.

<3>背景平铺

background-repeat: [平铺方式]

这里的平铺方式是我们自己选择的，有以下几种：

repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺

<4>背景位置

background-position: x y

这里的位置要我们自己设定，有三种设置方法：

方位名词: (top, left, right, bottom)
精确单位: 坐标或者百分比(以左上角为原点)
混合单位: 同时包含方位名词和精确单位

那么这里需要注意的地方在哪里呢？

如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)
2.如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )
3.如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)
4.如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.
5.如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)

这里说一下屏幕上，也就是计算机里面x轴和y轴的图像

在这里插入图片描述

<5>背景尺寸

background-size: length|percentage|cover|contain;

这里注意：

1.可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px，
2.也可以填百分比: 按照父元素的尺寸设置.
3.cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
4.把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.

背景相关部分代码

<!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>
</head>
<body>
    <!--背景颜色-->
    <div style="width: 500px; height: 100px; background-color: red;"></div>
    <!--背景图片-->
    <div style="background-image: url('rose.jpg'); height: 220px; width: 220px;"></div>
    <!--背景图片平铺 repeat是x和y轴都会平铺,-->
    <div style="background-image: url('rose.jpg'); height: 220px; width: 880px; background-repeat: repeat;"></div>
    <!--背景图片位置（background-position）。top为y轴最上，bottom为y轴最下，left为x轴最左，right为x轴最右-->
    <div style="background-image: url('rose.jpg'); height: 550px; width: 200px; background-repeat: no-repeat; background-position: top; background-color: rgb(183, 0, 255);"></div>
    <!--背景图片尺寸（background-size）：cover长款都扩展，可能有部分展示不完整-->
    <div style="background-image: url('rose.jpg'); height: 500px; width: 800px; background-repeat: no-repeat; background-color: rgb(255, 0, 0); background-size: contain;"></div>
</body>
</html>

由于不便截图，所以这里的网页我就不放出来了。

圆角矩形

圆角矩形是通过 border-radius 使边框带圆角效果。

<1>基本用法

border-radius: length;

这里的length指的是哪个角的半径，length越大，弧线就越大。

代码如下：

 width: 500px;
 height: 200px;
 border: 10px solid red;/*线条的宽度*/
 border-radius: 10px;/*角的圆润程度*/

在这里插入图片描述

<2>生成原形

让 border-radius 的值为正方形宽度的一半即可

代码如下：

 width: 300px;
 height: 300px;
 border: 2px solid red;
 border-radius: 150px;/*生成圆形*/

在这里插入图片描述

<3>生成圆角矩形

让 border-radius 的值为矩形高度的一半即可

代码如下：

width: 300px;
height: 150px;/*其中一个是另外一个的一半*/
border: 2px solid red;
border-radius: 150px;/*生成圆角矩形*/

在这里插入图片描述

五丶盒模型

HTML就相当于一个矩形的盒子。主要有四部分：

1.边框 border
2.内容 content
3.内边距 padding
4.外边距 margin

边框

边框属性有三个

粗细: border-width
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color

我们可以设置这三个属性然后调整我们边框的属性。
代码如下：

width: 500px;
height: 200px;
border: 1px solid red;

在VS中整体代码如下：
在这里插入图片描述
边框在网页中显示如下：

内边距

padding 设置内容和边框之间的距离
就是如果说我们之前的写法是这样

height: 200px;
width: 300px;
border: 2px solid blueviolet;

在这里插入图片描述

用来设置长和宽，然后我们加入padding之后：

width: 300px;
height: 200px;
border: 2px solid blueviolet;
/* 设置内边距 */
padding-top: 10px;
padding-left: 20px;
/* 如果四个方向都要设置内边距,直接padding一次到位就好了*/
padding: 20px;

在这里插入图片描述
可以很明显的看到和边框之间有了距离。

当然我们还可以再具体一点：

padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

就是顺时针方向转一圈。

外边距

外边距控制盒子和盒子之间的距离，写法和上面类似。

可以给四个方向都加上边距
margin-top
margin-bottom
margin-left
margin-right

然后这里贴一下在VS上的代码：

<!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>
        #d1{
            width: 200px;
            height: 50px;
            border: 2px solid red;
            /*两个div要间隔一定距离，只需要设置其中一个div就好了*/
            margin-bottom: 20px;
        }
        #d2{
            width: 200px;
            height: 50px;
            border: 2px solid blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="d1">水果</div>
    <div id="d2">蔬菜</div>
</body>
</html>

对应部分具体展示效果如下：
在这里插入图片描述

当然我们也可以具体，像内边距一样

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

六丶总结

知识点其实不太难，但是多，所以还是要多练。

梦想成为光头强！

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb--CSS基础

前端--CSS一丶CSS简介二丶引入方式1.style标签的方式/内部样式表2.html标签当中style属性/行内样式表3.外部样式表三丶选择器基础选择器<1>标签选择器<2>类选择器<3>id选择器<4>通配符选择器<5>总结复合选择器<1>后代选择器<2>子选择器<3> 并集选择器一丶CSS简介CSS就是层叠样式表，是一种描述HTML文档样式的语言。其描述应该如何现实HTML元素，它节省了大量的工作。
复制链接

扫一扫