【全栈开发】②CSS入门

zhiyog

已于 2024-09-21 14:01:18 修改

阅读量703

点赞数 24

分类专栏： java全栈文章标签： css 开发语言前端

于 2024-09-11 20:16:12 首次发布

本文链接：https://blog.youkuaiyun.com/2201_75317009/article/details/141370203

版权

java全栈专栏收录该内容

4 篇文章

订阅专栏

前言

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS基础

1. CSS 语法

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:

p {color:red;text-align:center;}

结构：

Alt

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束。

2. CSS 选择器

① 元素选择器（Element Selector）：通过元素名称选择 HTML 元素。

如下代码，p 选择器将选择所有 <p> 元素:

p {
  color: blue;
}

② 类选择器（Class Selector）：通过类别名称选择具有特定类别的 HTML 元素。

类选择器以 . 开头，后面跟着类别名称。

如下代码，.highlight 选择器将选择所有具有类别为 “highlight” 的元素。

.highlight {
  background-color: yellow;
}

③ ID 选择器（ID Selector）：通过元素的唯一标识符（ID）选择 HTML 元素。

ID 选择器以 # 开头，后面跟着 ID 名称。

如下代码，#runoob 选择器将选择具有 ID 为 “runoob” 的元素。

#runoob {
  width: 200px;
}

④ 属性选择器（Attribute Selector）：通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。

如下代码，input[type="text"] 选择器将选择所有 type 属性为 “text” 的 <input> 元素。

input[type="text"] {
  border: 1px solid gray;
}

⑤ 后代选择器（Descendant Selector）：通过指定元素的后代关系选择 HTML 元素。

后代选择器使用空格分隔元素名称。

如下代码，div p 选择器将选择所有在 <div> 元素内的 <p> 元素。

div p {
  font-weight: bold;`
}

⑥ 全局选择器 ：这个前面是 * 号，一般用于初始化。

* {
  font-weight: bold;`
}

样式优先级：

行内样式 > id选择器 > 类选择器 > 元素选择器 > 全局选择器

3. CSS样式表

插入样式表的方法有三种：

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档，是一个独立的css文件，不是html。

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

注：不要在属性值与单位之间留有空格（如：“margin-left: 20 px” ），正确的写法是 “margin-left: 20px” 。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像下面，在 html 中定义:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性：

h3
{
    text-align:right;
    font-size:20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

多重样式优先级

内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

4. CSS字体

字体颜色
四种颜色定义方式：

div{color:red;}
div{color:#ff0000;}
div{color:rgb(255,0,0);}
div{color:rgba(255,0,0,0.5);}

字体系列
CSS字体属性定义字体，加粗，大小，文字样式。
在CSS中，有两种类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）

font-family 属性可以设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。
多个字体系列是用一个逗号分隔指明。

p{font-family:"Times New Roman", Times, serif;}

字体样式

这个属性有三个值：

正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

字体大小
font-size 属性设置文本的大小。

① 绝对大小：
设置一个指定大小的文本，不允许用户在所有浏览器中改变文本大小，确定了输出的物理尺寸时绝对大小很有用。

② 相对大小：
相对于周围的元素来设置大小，允许用户在浏览器中改变文字大小。

如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
浏览器最小字体为12px。

字体粗细
font-weight属性。

normal				默认
bold 				粗体
bolder 				更粗的字体
lighter 			更细的
100 - 900 			400为默认，700为粗体

5. CSS背景

背景颜色
background-color 属性定义了元素的背景颜色。
页面的背景颜色使用在body的选择器中：

body {background-color:#b0c4de;}

CSS中，颜色值通常以以下方式定义:

十六进制 - 如：“#ff0000”
rgb - 如：“rgb(255,0,0)”
rgba- 如：“rgba(255,0,0,0.5)”
颜色名称 - 如：“red”

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

背景图像
background-image 属性描述了元素的背景图像。
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

实例：

body {background-image:url('paper.gif');}

背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺，background-repeat可以设置平铺。

repeat 		默认值
repeat-x 	水平平铺
repeat-y 	垂直平铺
no-repeat 	不平铺

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

背景图片位置
可以利用 background-position 属性改变图像在背景中的位置:

left top 		左上
left center 	左中
let bottom 		左下
right ...		略
center ...		略
x% y% 			百分比
xpos ypos 		像素

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

背景图像滚动
background-attachment可以设置背景图像滚动。


scroll		背景图片随着页面的滚动而滚动，这是默认的。
fixed		背景图片不会随着页面的滚动而滚动。
local		背景图片会随着元素内容的滚动而滚动。
initial		设置该属性的默认值。
inherit		指定 background-attachment 的设置应该从父元素继承。 

body
{ 
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

背景图片大小


length		设置宽度高度，第一个宽度，第二个高度，缺省则auto
percentage 	设置百分比
cover 		保持比例，刚好容纳下图片，图片不超界（常用）
contain 	保持比例，刚好填充所有区域

背景- 简写属性

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中。
背景颜色的简写属性为 “background”:

body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

6. CSS文本

文本颜色
颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

一个网页的背景颜色是指在主体内的选择：

实例
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐。
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

实例

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

实例
a {text-decoration:none;}

实例
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

实例
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

添加文本阴影

这个例子演示了如何设置文本阴影。
h1 {text-shadow:2px 2px #FF0000;}

行之间的空间

<p class="small">
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
</p>

<p class="big">
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
</p>

文本缩进
文本缩进属性是用来指定文本的第一行的缩进。

实例
p {text-indent:50px;}

属性	描述
`color`	设置文本颜色
`direction`	设置文本方向
`letter-spacing`	设置字符间距
`line-height`	设置行高
`text-align`	对齐元素中的文本
`text-decoration`	向文本添加修饰
`text-indent`	缩进元素中文本的首行
`text-shadow`	设置文本阴影
`text-transform`	控制元素中的字母
`unicode-bidi`	设置或返回文本是否被重写
`vertical-align`	设置元素的垂直对齐
`white-space`	设置元素中空白的处理方式
`word-spacing`	设置字间距

7. CSS 链接

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

文本修饰和背景颜色

a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

实例
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

8. CSS 列表和表格

在 HTML中，有两种类型的列表：

无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母

list-style-type 属性指定列表项标记的类型。

ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}

作为列表项标记的图像，可以将图片当作列表标记。

ul{
    list-style-image: url('sqpurple.gif');
}

list-style-type:none 属性可以用于移除小标记。
默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，
可使用 margin:0 和 padding:0 来移除

下面是包含这些属性及其描述的表格：

属性	描述
`list-style`	简写属性。用于把所有用于列表的属性设置于一个声明中
`list-style-image`	将图像设置为列表项标志
`list-style-position`	设置列表中列表项标志的位置
`list-style-type`	设置列表项标志的类型

9. CSS表格

下面的例子指定了一个表格的Th和TD元素的黑色边框：

实例
table, th, td
{
    border: 1px solid black;
}

请注意，在上面的例子中的表格有双边框。
这是因为表和th/ td元素有独立的边界。


折叠边框 border-collapse 属性设置表格的边框
是否被折叠成一个单一的边框或隔开：

实例
table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}

width 和 height 设置我们的宽和高。
text-align 属性设置水平对齐方式，向左，右，或中心。
vertical-align 属性设置垂直对齐，比如顶部，底部或中间。
padding 用于填充区域的空间。

10. CSS 盒子

在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

弹性盒子

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，多用于不同用户端的显示。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

flex-direction 属性指定了弹性子元素在父容器中的位置。
flex-direction: row | row-reverse | column | column-reverse

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content 语法如下：

justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:

flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法
align-items: flex-start | flex-end | center | baseline | stretch
各个值解析:

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。

语法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各个值解析:

nowrap - 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。

11. CSS 定位

position 属性指定了元素的定位类型。

position 属性的五个值：

static HTML 元素的默认值，即没有定位，遵循正常的文档流对象，静态定位的元素不会受到 top, bottom, left, right影响。
relative元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
fixed相对定位元素的定位是相对其正常位置。
absolute绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
sticky

12. CSS Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值：

值	描述
`visible`	默认值。内容不会被修剪，会呈现在元素框之外。
`hidden`	内容会被修剪，并且其余内容是不可见的。
`scroll`	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
`auto`	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
`inherit`	规定应该从父元素继承 `overflow` 属性的值。

13. CSS 浮动

float，脱离标准流（文档流），分为 left 和 right 两种。
通常我们可以通过浮动，来使得进行一个横向摆放，或者把间隙去掉。

但是浮动会有一个影响，会影响后续的元素。为什么？
如果对块中元素进行一个浮动，那么块中的元素就相当于脱离了块，块也就没办法显示了。

清除浮动

.text_line
{
    clear:both;
}

14. CSS 圆角

顾名思义，就是我们的尖角钝化，变成圆角，100%则为圆形。
使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

border-radius: 50% 和 border-radius: 100%
都是用于给元素设置圆角的 CSS 属性，它们的效果有所不同，具体区别如下：

border-radius: 50%：当元素是正方形时，这个值会使元素呈现一个圆形。如果元素是矩形，它会变成椭圆形。这个值基于元素的宽高比例来工作，因此可以使元素看起来更圆润，但不会超过元素的最大宽高限制。
border-radius: 100%：这个值可以使任何元素尽可能地圆形，但通常只对高度和宽度相等的元素有效。如果宽高不相等，它会尝试把边界完全变圆，但由于 100% 表示超出边界，它可能会使元素看起来有些不自然。基本上，它会将元素的边角“拉扯”到中间。