CSS样式表的学习

one day321

已于 2023-07-17 18:32:34 修改

阅读量614

点赞数

文章标签： css 学习前端

于 2023-07-12 17:46:49 首次发布

本文链接：https://blog.csdn.net/qq_55928086/article/details/131686413

版权

本文详细介绍了CSS的核心概念和用法，包括选择器（元素选择器、ID选择器、类选择器、通用选择器、分组选择器）、样式应用（外部、内部、内联）、颜色与背景、边框与边距、填充、盒子模型、文本样式、字体、链接、列表和表格。重点讨论了CSS中的定位属性，如静态、相对、固定和绝对定位，以及浮动和清除元素。

摘要由CSDN通过智能技术生成

CSS样式，在前面学习HTML的结构时，也讲过一点。大概知道CSS样式如何使用。现在，系统的讲述一下CSS的用法，以及关于CSS样式的一些结构。

参考文章：CSS 背景图像重复 (w3schools.com)

一、CSS介绍

CSS 代表层叠样式表
CSS描述了HTML元素如何在屏幕上显示，纸张或其他介质
CSS节省了大量的工作。它可以控制布局一次多个网页
外部样式表存储在CSS文件中

二、CSS语法和基本用法

基本结构：语法、选择器、使用方法、注释方法

CSS 规则由选择器和声明块组成。

语法：

剖析：

CSS选择器，分为5种，前面在HTML也讲述过一些。

1.CSS元素选择器 （一些HTML基本的元素）

比如：p{ } h1{ } div{ }

2.CSS id选择器（自定义的HTML元素）

比如： #dada{ }

3.CSS类选择器 （使用class自定义的元素）

比如： .dada{ } 或者： p.dada{ } //这种用法，可以指定某个元素p的dada属性！

4.CSS通用选择器

使用*{} 直接应用到所有css元素里面。

5分组选择器 (就是将一部分css样式相同的元素放在一起，减少代码量)

p，h1，div{ }

使用CSS的三种用法：

1.外部CSS (就是自定义的样式表，然后指定样式表。<link rel="stylesheet" href="mystyle.css">)

注意：css样式里面的一些属性，不要有空格！！！比如：witdh:300px 这个里面不要有空格。

2.内部CSS （就是放在头部的CSS样式）

3.内联CSS （放在内部的使用style样式声明的！）

注意：在上面三种方法都使用的情况下，内联样式的优先级大于前面两种！

注释方法：

在html里面，注释方法是：

在CSS里面，注释方法是：/* */

CSS颜色和背景

CSS颜色和HTML的介绍是一样的，这里额外记忆一下透明度这个元素。

在CSS颜色里面，可以使用opacity表示透明度：

div {
background-color: green;
opacity: 0.3;
}

也可以使用RGBA的方式，添加透明度：

div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

background-color
background-image
background-repeat
background-attachment
background-position
background（速记属性）

背景颜色：background-color

背景图像：background-image:url("");

背景图像重复：设置不重复：background-repeat：no-repeat 、repeat-x、repeat-y。

背景图像位置：background-position：left top

背景图像附件：background-attachment：fixed、scroll。（一个是固定位置）

简写背景图像的属性：

例如：相当于包括了上述的所有属性

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

CSS边框、边距、填充

边框属性：

border-style：设置边框的样式，比如：solid。表示粗体。

solid、dotted(虚线边框)、none、double

border-width：边框的宽度。（就是黑线的宽度。）

它有四个边框，top、right、bottom、left。（按顺时针的顺序。）

border-color：边框颜色，同样它也有四个边框。

border-radius：设置圆角边框。

上述四个边框，也可以这样写：border-top-color （先写是哪一条边框。）或者不写边框，直接写2px，它会根据顺序自动填充。

边距属性：margin

它也有四个属性。另外，学一个继承属性inherit。（继承属性有意思捏，如果使用继承，那么它和padding的展示页面有一些相同之处。）

例如：<div>是父类，它定义了边框1px。右边框的空白空间是100px。

<p.ex1>也是块元素，属于div框架里边，加入继承属性之后。它会距离div的边框100px。

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>


<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>

注意：继承的方式，只能继承边距，不能继承样式。就比如上面的例子，它只继承了边距，边框1px的属性并没有继承。

两个边距会折叠成一个边距：

collapse、比如，定义上边一个元素的下边距是100px。下边一个元素的上边距是20px.按道理是100px+20px。总共120px的距离，但是，实际上只有100px。这就是折叠。

填充：padding

它也存在四个边框属性。它实际上就是，里面的块元素和外边边框的距离。它存在两种方式。一种是加了填充属性整个边框宽度不变，一种是会变化。

它常和盒子属性一起使用。先看会变化的：直接加入填充属性，它会随着填充的大小，而改变整个边框的大小。

使整个边框宽度不变，加入box-sizing属性。

例如：

div {
width: 300px;
padding: 25px; //无论，怎么改变这个值，整个width也不会改变。
box-sizing: border-box;
}

CSS高度/宽度、盒子模型、轮廓（outline）

CSS的width、height和前面所学的border边框的宽度是不一样的概念！！！一个指的是边框，线的宽度，一个是关于某一个属性的宽度。

auto- 这是默认值。浏览器计算高度和宽度
length- 定义高度/宽度，单位为px， cm，等。
%- 定义高度/宽度的百分比包含块
initial- 将高度/宽度设置为其默认值
inherit- 高度/宽度将是继承自其父值

最大宽度：max-width:

盒子模型：

内容 - 显示文本和图像的框的内容
填充 - 清除内容周围的区域。填充是透明的
边框 - 围绕填充和内容的边框
边距 - 清除边界外的区域。边距为透明

轮廓（outline）：

它的实质其实就是边框之外的部分，注意和边框不同，和margin边距也不同。轮廓是可能与其它部分重叠的存在。

outline-style
outline-color
outline-width
outline-offset
outline

轮廓样式：outline-style 它的属性和边框样式是一样的。

轮廓偏移：outline-offset 它会在边框之外偏移一部分空空间。有点像margin。

但又有点不一样，轮廓的改变是不会影响整体的改变，不像前面所学的边框改变一个，会导致整个盒子大小改变，除非加入box-sizing:border-box。

（轮廓没有加偏移之前，它就相当于边框，加了偏移之后，他才会距离边框有一些空间）

简便用法：（按顺序填写，和边框的简便写法是一样的）

outline-width
outline-style（必填）
outline-color

CSS文本

文本颜色：color //和其它不一样，它只需要一个color元素即可。

文本对齐方式：

text-align
text-align-last
direction
unicode-bidi
vertical-align

text-align：center、left、right、justify。 //左对齐或右对齐、居中对齐或两端对齐

text-align-last：文本的最后一行的格式。

direction：表示文本的方向。

例如：p {
direction: rtl;
unicode-bidi: bidi-override;
} //表示，颠倒的方向。

vertical-align：baseline、text-top、text-bottom。垂直对齐的方式。baseline是默认的方式。

文本修饰（下划线text-decoration）：

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration

text-decoration-line：修饰线。overline、underline、line-through（上划线、下划线、中间线）

text-decoration-style：修饰线的样式，注意要先写修饰线属性，才能写这个。

text-decoration-thickness：修饰线的宽度。

简便用法：（按顺序填写。）

text-decoration-line（必填）
text-decoration-color（可选）
text-decoration-style（可选）
text-decoration-thickness（可选）

例如： p {
text-decoration: underline red double 5px;
}

注意：text-decoration:none。表示无下划线。

文本转换（text-transform）：text-transform: uppercase; (大写)、lowercase; capitalize;(首字母大写)

文本间距：

text-indent
letter-spacing
line-height
word-spacing
white-space

text-indent：文本缩进（就是首行缩进）。text-indent: 50px;

letter-spacing：字母间距。letter-spacing: 5px;

word-spacing：单词间距。

line-height：行高。line-height: 0.8; （注意一下，只有它的属性值是0.8。没有px）

white-space：空白，禁止换行。 white-space: nowrap;

文本阴影（text-shadow）：

它的顺序是：水平、垂直、模糊（可选）、颜色。

例如： h1 {
text-shadow: 0 0 3px #ff0000;
}

CSS字体、图标、链接

字体有很多种，在英文字体里面，请记住两种最常用的：Serif、Sans-serif。

有的时候，书写会出现多个字体。这是作为备用字体，就是当第一种字体没有找到，就使用下面一个字体。

font-family ：字体样式。

font-style：字体形状。normal（正常）、italic（斜体）。这里，我稍微感觉有些困惑。在前面边框的学习，有一个border-style: solid（黑实线。）！！！哦哦哦，是不一样的。

font-weight：字体粗细。（它有一个bold的属性，表示粗体。和前面style样式是分开的。它不能表示字体大小，只能表示粗细。）

font-variant：字体变体。（这个很少用）

font-size：字体大小。这里要注意，字体大小是字体大小，不能用字体大小去表示标题h1~h6这种信息。它存在三种表现形式：vw、px、em。

vw会随着视图（浏览器页面）的改变而改变（1vw = 视口宽度的 1%。如果视口宽 50 厘米，则 1vw 为 0.5 厘米。）。px是像素。em相当于16px。

简写字体：

font-style （样式只有斜体和正常）
font-variant （变体，不常用，可选）
font-weight
font-size/line-height （必选）
font-family （必选，字体选择）

例如：

p.a {
font: 20px Arial, sans-serif; （后面是一个字体选择。）
}

图标：

这个介绍较少，建议翻阅网上资料自主添加。它的标签是<icon>。也可以使用链接。

<i class="glyphicon glyphicon-cloud"></i> //查略资料得。

CSS链接：

链接的标签是<a href="">

它的样式有四个属性，四个链接状态是：

a:link- 一个正常的、未访问的链接
a:visited- 用户访问过的链接
a:hover- 当用户将鼠标悬停在它上面时的链接
a:active- 点击链接的那一刻

它也经常和文本修饰符一起使用：text-decoration:none；//如果没有这句，链接会显示下划线。

存在背景颜色、按钮。

举例：这是一个按钮链接。

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

<a href="default.asp" target="_blank">This is a link</a>

CSS列表、表格

在前面的HTML里面学习了无序（ul）和有序(ol)列表。

list-style-type：列表样式。circle、square。

list-style-image：列表图片。url("")

list-style-position：列表的位置。两种：outside（列表的序号放在div外面）、inside

表格：

HTML学习了<table>、<tr>、<th>、<td>。

它们的属性主要是<border>. (表格的边框)

border-collapse：折叠表格。border-collapse: collapse; //表示，使用单边框。因为默认情况下都是双边框。

td—— text-align：使表格里面的文本对齐。

例如：td{text-align:center；} //居中对齐。

注意：th这个元素，默认是居中对齐的，而td这个元素，默认是靠左对齐。

td—— vertical-align：垂直对齐。文本会靠左下。

有的时候，还会用到表格填充：padding。

th、td—— border-bottom：水平分割器。相当于只有水平一条线。

tr—— tr:hover{ background-color: }。鼠标悬停表。鼠标悬停会在一行出现颜色。

tr:nth-child(even){background-color: }. 条带表格。

响应式表：（有意思捏。）

其实，就是，它多了一个可滑动的滑动栏。

CSS显示属性、最大宽度、位置（定位）

在学习这三个知识点时，先介绍一下块元素和内联元素。这个在HTML介绍过一些。这个很重要。比如：块元素，它的特点是总是从新行开始，它的区域总是尽可能的往两边延伸。

内联元素，它的特点是按需占用，它不会从新行开始。

显示：其实就是display属性以及visibility属性。

display:none（会将它定义的属性都隐藏，在界面上不会展示）

display：inline。将块元素变为内联元素。

比如： li本来是一个列表，这是一个块元素。使用inline元素之后，它会变成一行。

li {
  display: inline;
}
<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

display：block。将内联元素转换成块元素。

例如： a是一个内联元素，它原本是在一行展示，转为块元素之后，就会每一行占用一个。

a {
  display: block;
}

<a href="/html/default.asp" target="_blank">HTML</a>
<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>

visibility：hidden。//隐藏某个元素视图，仍会存在遗留下的空间。

设置宽度和最大宽度：

目的是防止，像块元素，它会尽可能的往两边延伸。设置宽度或者最大宽度。就可以解决这个问题。

同时，设置margin:auto。就可以让这个块元素处于居中位置。

位置或称定位（position）：

有五种不同的位置值：

static
relative
fixed
absolute
sticky

position：static； //静态位置，不会受其它属性的css样式改变。比如，加入left:20px。这个原本的属性不会边。

position：relative；//相对位置，受其它属性的css样式改变，但整个元素的块元素大小不变，它只会偏移。

position：fixed； //固定位置，它是一种视图位置。这个不太好。因为它会覆盖原本css的视图。它是一种类似于内联属性的位置。

position：absolute； //绝对位置。它是相对于父元素而言的。它一般都放在父元素的框架里边。在父元素里面自定义的css样式。

position：sticky； //粘性位置。它相当于一个块级元素。它会随着滑动栏的滑动而改变。而且不会覆盖原本的视图。（这个有意思捏。）（需要注意的是，这个属性，在有些浏览器是下是不支持的，需要加入一些组件。比如：Safari浏览器，需要加入position: -webkit-sticky; 然后在使用这个属性。）

CSS索引、溢出、浮动和清除

Z-index:

这个元素，可以使得它可以和其它视图重叠。通常和position：relative、absolute。搭配一起使用。它主要的作用是决定，多个图像，哪个图像放在最上面。

例如：z-index:3 要比z-index:1 。要放在1的上面。

注意：如果没有加这个索引元素。那么多个图像的重叠，默认是最后的元素放在最上面。

溢出overflow：

它存在四个属性：visible、auto、hidden、scroll。

overflow:visible; 它保持文本原样，尽管文本超出框架，它也会显示。

overflow:hidden；对于超出框架的文本，它会格式化掉。

overflow:auto；它会根据文本的大小，自动调整框架大小。

overflow:scroll；它一般会事先设置框架大小，如果文本超出这个范围，就会出现滑动栏。注意，这个属性，存在两个值。overflow-x。overflow-y。

浮动和清除（float、clear）：

浮动属性存在四个值：

left- 元素浮动在其容器的左侧
right- 元素浮动在其容器的右侧
none- 元素不会浮动（将显示在文本中出现的位置）。这是默认值
inherit- 元素继承其父元素的浮点值

浮动属性和position位置属性有点相似。但其实一点也不同。position位置属性一般是重叠，而浮动属性不会重叠。例如：

div1、div2、div3分别是三个块元素。差不多每一个都要占用一行。

当设置float:left之后，相当于变成了内联元素。只在一行输出。

div {
  float: left;
  padding: 15px; 
}

<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>

清除元素clear：

它存在下列属性值：

none- 元素没有被推到下面左浮动或右浮动元素。这是默认值
left- 元素被推到左下方浮动元素
right- 元素被推到下面右浮动元素
both- 元素被推到两者下方左右浮动元素
inherit- 元素继承清除值从其父级

清除元素有意思捏。

它解释了浮动元素的本质，它一般是和浮动元素进行搭配使用的。比如下面这个例子，没有加clear之前，它会作为一个内联元素，放在文本的左边。

加入clear属性之后，它会从内联元素变为恰当的块级元素，从新行开始，不会重叠。（就是auto类型的块级元素。）

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}

CSS内联块、CSS对齐

内联块：

表示作用在内联元素里面的块级元素。

一般情况，块级布局是单独占一行，并尽可能的往那么延伸。而块级元素只占设置的宽度大小。

这里，内联块元素的布局，就是在设置的内联元素里面，单独占一行。（设置导航栏。）

例如：

使用内联块创建导航链接：

.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

//nav是块级元素。在<li>设置内联块元素。
<ul class="nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About Us</a></li>
  <li><a href="#clients">Our Clients</a></li>  
  <li><a href="#contact">Contact Us</a></li>
</ul>

CSS水平和垂直对齐：

margin:auto 设置块级元素居中。（不是文本居中噢）

text-align：center； 文本居中。

有的时候，元素存在可能，图像在块级框架之外。这个时候，需要用清除修复元素。clearfix hack

清除修复元素：

代码元素：

.clearfix::after {
content: "";
clear: both;
display: table;
}

line-height：垂直居中。

transform：translate(%，%) 使用位置变换。

flebox：弹性框。