小白学习Java第二十四天

最新推荐文章于 2024-01-18 07:00:00 发布

sjxxxx_

最新推荐文章于 2024-01-18 07:00:00 发布

阅读量108

点赞数

分类专栏： Java小白文章标签：学习 java 前端

本文链接：https://blog.csdn.net/sjxxxx_/article/details/126751587

版权

Java小白专栏收录该内容

60 篇文章 4 订阅

订阅专栏

今日内容

CSS概述
CSS引入方式
CSS语法
CSS选择器
CSS常见样式属性

CSS概述

CSS全称层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

层叠：

多个样式可以作用在同一个html的元素上

样式表：

提供了丰富的样式修饰内容

作用：

① 样式丰富，功能强大 ② 内容和样式分离(解耦)

CSS与HTML结合方式

CSS有三种引入方式：

1.行内样式：在标签内使用style属性指定css代码。该方式定义样式仅作用于当前标签。

优缺点: 由于复用性不好，实际在写页面时不提倡使用，在测试的时候可以使用。

2. 内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码。

优缺点: 由于样式与结构未全部分离, 如果只控制当前页面的标签样式的话使用内部样式, 复用性不好。

3. 外部样式：定义css文件，在head标签中使用link标签，引入外部的资源文件。

该方式定义样式可以作用于其他页面。

语法格式一：

语法格式二：

@import url(css/style.css);

优缺点: 重用性较强, 一个css样式文件可以控制多个页面。

第一步创建一个外部css文件：

第二步在html页面中引用外部css文件：

优先级问题:

行内样式 > 内部样式 & 外部样式(后加载的先生效)

就近原则：哪个样式离修饰的元素近就采用哪种类型的样式。

CSS语法格式

无论使用HTML还是CSS都需要遵从一定的规范。

css定义规则如下：

选择器{

属性1:属性值;

属性2:属性值;

属性3:属性值;

...

}

或者：

选择器{属性1:属性值;属性2:属性值;属性3:属性值;... }

其中:

选择器：指css样式作用的HTML对象。

{}：限定范围，指当前花括号内的所有样式都属于当前选择器。

注意事项：

选择器严格区分大小写，属性和属性值不区分大小写。

CSS选择器

想要将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。筛选具有某一特征的元素

基本选择器

基本选择器是我们使用频率最高的选择器。

基本选择器:标签选择器 ID选择器类选择器全局选择器

标签选择器

HTML标签指HTML的标记名称、如div、html、body、input等。所有符合HTML规范的标记都可以作为标签选择器。

写法格式:

标签名{

样式一;

样式二;

....

}

2、ID选择器

ID选择器CSS中用“#”开头定义，后面跟随ID名称。例如：#name

ID为当前HTML元素的ID属性值。

写法格式:

#id名称{

样式一;

样式二;

....

}

3、类选择器

在css中类选择器使用“.”符号开头定义，后面跟随类名。例如：.name

类名即是HTML中class属性的值，大多数HTML元素都可以定义class属性。

写法格式:

.类名{

样式一;

样式二;

...

}

4、全局选择器

全局选择器又称通用选择器，将匹配任何标签, 使用*来表示。

样式一;

样式二;

...

}

总结：基本选择器的优先级

ID选择器>类选择器>标签选择器>全局选择器

其它选择器（复合选择器）

其它常见的选择器有:

组合选择器
后代选择器
子选择器
属性选择器
伪类选择器

1、组合选择器

组合选择器:当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。

p,div{

样式规则；

}

表示p和div标签使用相同的样式效果。

2、后代选择器

后代选择器：用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。

parent child

例如： div里的span标签，表示div里的子孙span

div span{

}

3、子选择器

子选择器（child selector）仅是指它的直接后代，即儿子标签。子选择器是通过“>”进行选择。

parent > child

例如：表示div标签里的span，只能是直接子标签，即儿子。

div > span{

}

5、属性选择器

我们可以通过属性选择器，以属性名或者属性值来匹配对应标签

常用的属性选择器有:

[attr] 该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。

[attr=val] 该选择器仅选择 attr 属性被赋值为 val 的所有元素。

[attr^=val] 该选择器选择attr属性的值以val开头的元素。

[attr$=val] 该选择器选择attr属性的值以val结尾的元素。

6、超链接伪类选择器

伪类选择器主要有:

a:link{} 未被访问时

a:visited{} 访问过后

a:hover{} 鼠标悬浮时

a:active{} 鼠标激活时

CSS常见属性

尺寸修饰

尺寸样式:

属性名	属性说明
height	设置元素的高度
width	设置元素的宽度

字体样式

字体样式:

属性名	属性说明
font-size	字体大小
font-style	字体风格(取值：italic/normal...) 取值(扩展): italic : 斜体。对于没有斜体变量的特殊字体 normal : 默认值。正常的字体
font-family	字体类型(取值：隶书/微软雅黑...)
font-weight	字体粗细(取值：bold/normal...) 取值(扩展): Normal 默认值。定义标准的字符 bold 定义粗体字符 bolder 定义更粗的字符 lighter 定义更细的字符

文本样式

文本样式:

属性名	属性说明
color	文本颜色（取值：colorname或#0000FF）
text-align	文本对齐（取值：left/right/center...）
text-decoration	文本装饰(取值：none/underline...) 取值(扩展): none默认。定义标准的文本。 underline定义文本下的一条线。 overline定义文本上的一条线。 line-through定义穿过文本下的一条线
line-height	设置行高（设置垂直居中）
text-shadow	文本的阴影取值: h-shadow : 必需。水平阴影的位置。允许负值 v-shadow : 必需。垂直阴影的位置。允许负值 blur : 可选。模糊的距离 color : 可选。阴影的颜色 text-shadow: yellow -5px -5px 3px;

边框样式

边框样式:

属性名	属性说明
border-width	边框宽度按方向设置：border-(left/right/top/bottom)-width
border-color	边框颜色按方向设置：border-(left/right/top/bottom)-color
border-style	边框风格按方向设置：border-(left/right/top/bottom)-style

可以简写：

border:1px solid red; 表示四个方向的宽度都是1px，都是实线，都是红色。

border-left/right/top/bottom:1px solid red;

设置圆角边框：

属性名

属性说明

border-radius

圆角边框

按方向设置值：border-(top/bottom)-(left/right)-radius

该属性取值单位可以是像素，也可以是百分比，如果整体设置值，最多可以给四个值，按照左上，右上，右下，左下的顺序给值。

一个值：四个角有相同的边界半径；

两个值：第一个值表示左上角和右下角，第二个值表示右上角和左下角；

三个值：第一个值表示左上角，第二个值表示右上角和左下角，第三个值表示右下角；

四个值：左上，右上，右下，左下。

案例代码：

<!DOCTYPE html>

<head>

<style>

.box1{

width: 200px;

height: 200px;

/* 边框宽度 */

border-width: 5px;

/* 边框风格线型 solid dashed */

border-style: solid;

/* 边框颜色 */

border-color: red;

}

.box2{

width: 200px;

height: 200px;

/* border是边框的合并属性 */

border:5px solid blue;

}

.box3{

width: 200px;

height: 200px;

border-top: 5px solid red;

border-right: 5px dashed blue;

border-bottom: 5px double green;

border-left: 5px dotted orange;

}

input{

/* 清除边框 */

border: none;

border-bottom: 1px solid gray;

}

.box4{

font-size: 50px;

text-align: center;

line-height: 200px;

width: 200px;

height: 200px;

/* border是边框的合并属性 */

border:5px solid pink;

/* 圆角 */

border-radius: 50%;

}

.box5{

font-size: 20px;

text-align: center;

line-height: 100px;

width: 200px;

height: 100px;

/* border是边框的合并属性 */

border:5px solid pink;

/* 圆角 */

border-radius: 50%;

}

.box6{

width: 300px;

height: 150px;

border:5px solid red;

/* border-top-left-radius: 10px;

border-top-right-radius: 20px;

border-bottom-right-radius: 30px;

border-bottom-left-radius: 40px; */

/* 从左上角开始，按顺时针排列 */

border-radius: 10px 20px 30px 40px;

}

</style>

</head>

<body>

</body>

</html>

背景样式

背景样式:

属性名	属性说明
background-color: yellow;	背景颜色
background-image: url(img/1.jpeg);	背景图片
background-repeat	背景是否平铺取值: repeat-x : 水平方向平铺 repeat-y : 垂直方向平铺 repeat : 水平和垂直方向同时平铺 no - repeat : 不平铺
background-position: center;	背景偏移

简化写法：

background:red url() no-repeat;

案例代码：

<!DOCTYPE html>

<head>

<style>

.box{

width: 600px;

height: 400px;

/* 背景颜色 */

background-color: sandybrown;

/* 背景图片 */

background-image: url(img/liuyan.jpg);

/* 背景图片是否平铺 */

background-repeat: no-repeat;

/* 设置图片大小 */

/* background-size: 100% 100%; */

/* background-position: left bottom; */

background-position: 10px -20px;

}

</style>

</head>

<body>

</body>

</html>

盒子模型

什么是盒子模型:

CSS 的框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

平时我们所说的宽度和高度仅仅指的是内容的宽和高，而盒子的实际宽高通过下面的公式计算。

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

属性解析:

属性名

属性说明

内边距 padding

内边距：也叫填充（padding），设置元素内容与元素边框之间的距离。

填充的属性有四个取值：padding-(top/bottom/left/right) padding

一个值：padding:20px; 表示四个方向都是20px

两个值：padding:20px 30px ; 表示上下是20，左右是30

三个值：padding:10px 20px 30px;表示上10px，右20px，下30px，左同右20px

四个值：padding:10px 20px 30px 40px; 上右下左

外边距 margin

外边距 margin：也叫空白边（margin），位于盒子的最外围，设置不同元素之间, 它们边框与边框之间的距离。

空白边的属性有五种:margin-(top/bottom/left/right) margin

其赋值方式同padding

两个盒子外边距发生冲入问题：

当两个盒子纵向发生冲突时，取大做为两个盒子之间的外边距
当两个盒子横向发生冲突时，求和做为两个盒子之间的外边距

布局样式

HTML有些标签默认从左到右排列，如input。有些则默认从上到下排列，如div。

如果将这些默认从上到下的标签改变排列规则，按照从左到右的顺序排列，就需要用到浮动属性。float是css样式中的定位属性，用于设置标签对象的浮动布局，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动属性的取值有三个：left：元素左浮动 right：元素右浮动 none：默认值，不浮动

元素设置浮动后就会脱离标准文档流，所以会对页面中其他未设置浮动的元素排版产生影响，我们还可以使用clear属性清除浮动。

clear:left right both

注意：设置了浮动属性的元素，会脱离标准文档流，对周边的其他元素会产生影响。

属性解析:

属性名

属性说明

float

float是css样式中的定位属性，用于设置标签对象的浮动布局，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动属性的取值有三个：

left：元素左浮动

right：元素右浮动

none：默认值，不浮动

案例代码：

<!DOCTYPE html>

<head>

<style>

.box1{

width: 100px;

height: 80px;

background-color: red;

float: right;

}

.box2{

width: 200px;

height: 150px;

background-color: blue;

float: right;

}

.box3{

width: 300px;

height: 250px;

background-color: green;

float: right;

}

.clear{

clear: both;

}

border:1px solid orange;

}

</style>

<!--

标准文档流

浮动流

-->

</head>

<body>

<p>

优就业是中公教育IT培训品牌，致力于培养面向互联网领域的高端人

</p>

</body>

</html>

定位技术

HTML默认是流式布局（不会出现元素重叠），但在某些情况下需要改变元素的位置和标准布局方式。这时就可以采用定位技术。

css中关于定位的属性是position:

属性名

属性说明

position

定位

取值有如下几个：

relative：相对定位，无论是在标准文档流中还是浮动流中，都是相对于元素自身位置进行偏移，偏移后原来的位置依然保留，会留下空白，因此不会改变其他元素的布局。

absolute：绝对定位的元素会脱离标准文档流，使用left、right、top、bottom等属性相对于其最近的一个已定位的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则依据 body 元素左上角作为参考进行绝对定位。由于绝对定位的元素不在标准流中，因此会对其他元素的布局产生影响。

position:relative / absolute ;

relative 相对定位

相对原来的位置定位,定位完成后可以去偏移(移动),不会脱离标准文档流

absolute 绝对定位

绝对定位后，脱离文档流,位置移动看父标签中有没有定位，如果有定位则相对父标签偏移，如果父标签没有定位，相对<body>标签偏移

案例代码：

<!DOCTYPE html>

<head>

<style>

margin: 0;

padding: 0;

}

.parent{

width: 600px;

height: 500px;

border: 1px solid;

position: relative;

left: 100px;

top: 100px;

}

.box1{

width: 200px;

height: 200px;

background-color: red;

position: absolute;

left: 50px;

top: 50px;

}

.box2{

width: 200px;

height: 200px;

background-color: blue;

}

</style>

</head>

<body>

</div>

</body>

</html>

列表修饰

HTML有丰富的标签，这些标签被定义成不同的类型，一般被分为块标签、行标签和行块标签。

块标签：以区域块方式出现。每个块标签独自占一整行或者多行，且可设置宽高。

常见的块级元素：<div> 、<h*> 、<ul>、<p>等

独占一行，可以设置宽度和高度。

常见的行标签：<span> 、 <strong> 、<a>等

不会换行，同行显示，不能设置宽度和高度。

常见的行块标签：<img>、<input>、<textarea>等

既可以同行显示，还可以设置宽度和高度。

在实际开发中，如果希望这些标签之间可以相互转换，需要用到display属性

属性解析:

属性名

属性说明

display

用于定义建立布局时元素生成的显示框类型.

其取值如下:

inline：此元素将显示为行元素（行内元素display的默认值）

block：此元素指定为块元素（块元素display的默认值）

inline-block:将对象呈现为内联元素，对象内的元素块级展示。

none：隐藏元素

列表标签默认是带有项目符号的，如果不需要显示项目符号可以将列表样式中的list-style-type属性设置为none值去除，下面结合display属性和列表样式属性实现一个横向导航的效果。

list-style-image的使用

list-style-image：指定列表前的样式为图片

横向导航菜单案例代码：

<!DOCTYPE html>

<head>

<title>横向导航菜单</title>

<style>

li{

list-style-type: none;

float: left;

width: 80px;

height: 40px;

border: 1px solid blue;

margin-left : 10px;

text-align: center;

line-height: 40px;

background-color: cornflowerblue;

border-radius: 10px;

}

li a{

color: white;

text-decoration: none;

}

li a:hover{

color:red;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

思考：

如果不使用display属性中的inline-block实现菜单的横向显示，还可以通过哪个样式属性实现呢？

对，还可以通过float浮动属性实现，那么二者有什么区别呢？

float与display的区别：

浮动可以实现水平方向对齐(顶部对齐) display(底部对齐)
浮动内容的坍塌，造成后面内容会被浮动的内容覆盖：如果浮动了，记得要清除浮动
display可以实现标签的显示和隐藏。

sjxxxx_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小白学习Java第二十四天

css
复制链接

扫一扫

专栏目录

小白学习Java第二十四天

今日内容

“相关推荐”对你有帮助么？