JavaWeb--CSS基础_梦想成为光头强！

未知 02-07 3520

前端--CSS 一丶CSS简介二丶引入方式1.style标签的方式/内部样式表2.html标签当中style属性/行内样式表3.外部样式表三丶选择器基础选择器<1>标签选择器<2>类选择器<3>id选择器<4>通配符选择器<5>总结复合选择器<1>后代选择器<2>子选择器<3> 并集选择器<4> 伪类选择器<5>focus伪类选择器四丶常用元素属性字体属性 + 文本属性<1>设置字体<2> 大小<3>粗细<4>倾斜<5>文本颜色<6>文本对齐<7>文本装饰<8>文本缩进<9>行高文本相关代码背景属性<1>背景颜色<2>背景图片<3>背景平铺<4>背景位置<5>背景尺寸背景相关部分代码圆角矩形<1>基本用法<2>生成原形<3>生成圆角矩形五丶盒模型边框内边距外边距六丶总结

一丶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>标签选择器

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

写在hmtl文件里如下：网页上展示如下：

<2>类选择器

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

编辑器书写如下：页面展示如下：这种写法有一些地方是需要我们注意的：

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

<3>id选择器

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

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>  <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>  <div style="background-image: url('rose.jpg'); height: 220px; width: 880px; background-repeat: repeat;"></div>  <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>  <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 六丶总结

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