##CSS复习## ①

最新推荐文章于 2023-02-09 13:35:30 发布
最新推荐文章于 2023-02-09 13:35:30 发布
阅读量617 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/XBT1118/article/details/98489498
版权

CSS语法

CSS样式设置的语法包括两部分：选择器与样式声明。

例：

h1 {
    color: Tomato;
    font-size: 24px;
}

CSS注释

在CSS中的注释则以/*开始，以*/结束

例：

h1 {
    /* 这是一段单行注释，比如想在这里注释一下Tomato为西红柿色 */
    color: Tomato;
    font-size: 24px;
}

CSS选择器

CSS选择器可以根据元素名称、元素的id、class（类）、attribute（属性）等各种方式来选择指定元素。

元素名选择器

CSS选择器可以直接根据元素名来选择元素。如下所示，可以选择页面上所有的<p>元素。

p {
    color: Tomato;
    font-size: 24px;
}

Id选择器

Id选择器即通过HTML元素的id属性来选择指定元素。每个元素的id属性在一个HTML页面中应该是独一无二的，因此id选择器适合用来选择指定的某一个元素。具体写法如下所示，在目标id值前加上符号#即可。

#id_1 {
    color: Tomato;
    font-size: 24px;
}

Class类选择器

类选择器，就是通过HTML元素的class属性（类名）来选择指定的元素。写法上，在类名前加上符号.即可，则目标页面class属性（类名）等于该指定类名的所有HTML元素都是目标选择元素。

.class_name1 {
    color: Tomato;
    font-size: 24px;
}

选择器组队

h1, h2, #id_3 {
    color: Tomato;
    font-size: 24px;
}

CSS 属性选择器

CSS [attribute] 选择器

利用[attribute]属性选择器可以选择具有该指定属性的HTML元素。

a[target] {
    background-color: yellow;
}

举一个凭空造出来的fuck属性，如下例所示，所有具有fuck属性的元素，都会表现为背景黄色，上面的例子和a元素进行了组合，这个例子中不仅凭空造出fuck属性，而且不和a元素组合，这也就是为啥具有fuck属性的span元素也会表现为背景黄色。

[fuck] {
    background-color: yellow;
}

CSS [attribute="value"] 选择器

使用[attribute="value"]选择器来选择指定属性等于指定值的HTML元素。如下所示，选择target属性等于_blank的a元素：

a[target="_blank"] { 
    background-color: yellow;
}

CSS [attribute~="value"] 选择器

使用[attribute~="value"]选择器来选择指定属性包含指定值的HTML元素。如下所示，选择title~="zhuan"的元素即target属性中只要含有“zhuan”这个词的都属于目标元素。（被包含的这个词必须是独立成词的，更详细解释请看下方备注）

[title~="zhuan"] {
    background-color: yellow;
}

CSS [attribute*="value"] 选择器

使用[attribute*="value"]选择器来选择指定属性包含指定值的HTML元素。该选择器只要指定属性包含指定值即可，不需要指定值独立成词。

[title*="zhuan"] {
    background-color: yellow;
}

CSS [attribute|="value"] 选择器

使用[attribute|="value"]选择器来选择指定属性以指定值开头的HTML元素。但是开头的这个词必须是完整的，与后续的词之间必须以-符号来隔开，示例参详下方备注。

[class|="top"] {
    background: yellow;
}

CSS [attribute^="value"] 选择器

使用[attribute^="value"]选择器来选择指定属性以指定值开头的HTML元素。而这个选择器不同的是不要求指定值是完整单词，只要开头是指定值，后面不管是什么都无所谓。

[class^="top"] {
    background: yellow;
}

CSS [attribute$="value"] 选择器

使用[attribute$="value"]选择器来选择指定属性以指定值结尾的HTML元素。不要求指定值是完整单词，只要结尾是指定值，前面不管是什么都无所谓。

[class$="tent"] {
    background: yellow;
}

CSS 组合选择器

选择器的组合方式

不同的选择器是可以进行组合的，一个单独的选择器可以和另外一个选择器乃至更多的CSS选择器进行组合。CSS选择器的组合则一般包括如下4中组合方式：

  • 后代元素选择器（空格）
  • 子元素选择器（>）
  • 相邻兄弟选择器（+）
  • 普通兄弟选择器（~）
div p {
    background: Tomato;
}
div > p {
    background: Tomato;
}
div + p {
    background: Tomato;
}
div ~ p {
    background: Tomato;
}

CSS 伪类

伪类（pseudo-class）是用来定义某个元素的某种特殊状态。

跟链接元素相关的伪类

链接元素配合如下几种不同的伪类，则有不同的展示方式：

/* 没有被访问过的链接 */
a:link {
    color: blue;
}

/* 访问过的链接 */
a:visited {
    color: gray;
}

/* 被鼠标悬停在上方的链接 */
a:hover {
    color: green;
}

/* 被选中的链接元素 */
a:active {
    color: red;
}

伪类和类（Class）的组合

伪类和类（Class）的组合使用，顺理成章，天经地义，没什么好解释的，看例子吧：

a.jerk:hover {
    color: #46acb6;
    font-size: 48px;
}

 

<div> 被鼠标悬停的样式（hover）

举一个div元素的被鼠标悬停状态下的样式设置。

div:hover {
    color: white;
    background: #46acb6;
}

 

通过悬停来实现弹出另外一个元素

这是使用悬停伪类（:hover）的一个复合技巧，如下列所示：

p {
    display: none;
    background-color: black;
    color: white;
    padding: 20px;
}

div:hover p {
    display: block;
}

CSS 插入方式

CSS的三种插入方式

插入CSS样式表有三种方式，如下所示：

  • 通过<link>元素来引入外部样式表；
  • 以<style>标签在HTML源码内插入内部样式表；
  • 通过HTML元素的style属性来设置行内样式表。

引入外部样式表

使用外部样式表，非常方便就可以改变整个站点的风格样式。因为往往一个站点的多个页面都共用同一个外部样式表。

而引入外部样式表，则是通过在head元素中插入link元素，如下例所示：

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

内部样式表

内部样式表一般是通过<style>标签的方式直接把样式表插入到HTML源码内，因此被插入的CSS样式表就被称为了内部样式表。一般来说，内部样式表的style元素都是位于head元素内，但是这不是绝对的，直接插入在body元素中也是没问题的。

<html>
<head>
<style>
h1 {
    color: #46acb6;
    margin-left: 10px;
    }
p {
    color: LightGray;
    margin-left: 13px;
    }
</style>
</head>

<body>
    <h1>标题</h1>
    <p>这是一个段落</p>
</body>
</html>

行内样式表

通过元素的style属性可以设置行内样式表；行内样式表这种方式比较适合某元素需要单独进行一些样式设置。

<h1 style="color:#46acb6;margin-left:10px;">标题</h1>

CSS 优先级

CSS优先级梯度

如下所示，依次列出的四大类选择器的优先级梯度，从上往下越来越低，行内样式表 > Id选择器 > 类选择器、属性选择器、伪类 > 元素名选择器、伪元素：

  • 行内样式表 - 利用元素的style属性直接设置元素样式的那种方式优先级别最高；
  • Id选择器 - 直接通过元素id定位到指定元素的选择器优先级别次高；
  • 类选择器、属性选择器、伪类 - 类选择器、属性选择器、伪类的优先级别次次高；
  • 元素名选择器、伪元素 - 相对前面三大类而言，元素名选择器、伪元素的优先级别最低。

 

CSS 颜色

背景色

background-color和background特性都可以用来设置背景色。

<h1 style="background-color:Tomato;">Tomato</h1>

 

文本颜色

color特性可以用来设置元内的文本颜色。

<h1 style="color:Tomato;">Tomato</h1>

 

边框颜色

border特性可以用来设元素的边框颜色。

<h1 style="border:1px solid Tomato;">Tomato</h1>

 

颜色属性的取值表示

RGB 值

RGB是计算机通过红色、绿色、蓝色的比例来定义颜色的一种方式。红、绿、蓝的取值0-255。

rgb(red, green, blue)

HEX 值

HEX即16进制色彩的定义方式。

#rrggbb

HSL 值

HSL的方式是利用色调（hue）、饱和度（saturation）、明度（lightness）这三个指数进行对颜色的定义。

hsl(hue, saturation, lightness)
  • 色调hue的取值范围是0-360，0代表红色，120代表绿色，240代表蓝色。
  • 饱和度saturation取值范围0%-100%，取值越大则饱和度越高，越低则灰度越高。
  • 明度lightness取值范围是0%-100%，0%代表全黑，100%代表全白，50%代表黑白之间。

 

CSS 背景

CSS中跟背景相关的属性被用于设置元素的背景效果样式；相关属性有如下几种：

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

 

HTML 元素背景色设置

使用background属性或background-color属性都可以设置背景色。

地镇高岗，一派西山千古秀；

门朝大海，三河合水万年河。

<div style="background-color:LightGray;">
地镇高岗，一派西山千古秀；
</div>

<div style="background:LightBlue;">
门朝大海，三河合水万年河。
</div>

 

HTML 元素背景图片设置

使用background特性或background-image特性都可以设置元素的背景图片。

background: url('背景图片的url地址');

 

background-image: url('背景图片的url地址');

 

让背景图片只在水平方向上重复

默认情况下，背景图片会重复显示的；如果希望背景图片只在水平方向上重复，将元素的 background-repeat特性设置成repeat-x即可。

background-image: url('背景图片的url地址');
background-repeat: repeat-x;

 

让背景图片只在垂直方向上重复

默认情况下，背景图片会重复显示的；如果希望背景图片只在垂直方向上重复，将元素的 background-repeat特性设置成repeat-y即可。

background-image: url('背景图片的url地址');
background-repeat: repeat-y;

 

让背景图片不重复显示

默认情况下，背景图片会重复显示的；如果希望背景图片不重复显示，将元素的 background-repeat特性设置成no-repeat即可。

background-image: url('背景图片的url地址');
background-repeat: no-repeat;

让背景图片不重复，且控制背景图片的位置

可通过background-position属性来控制图片的位置，如下所示：

background-image: url('背景图片的url地址');
background-repeat: no-repeat;
background-position: right top;

让背景图片不随滚动而变化位置

将“background-attachment”的属性设定为“fixed”就能搞定了。

background-image: url('背景图片的url地址');
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;

使用background属性合并上述各属性

background: url('背景图片的url地址') no-repeat right top fixed;

使用background-origin定义背景图片的起始位置

利用background-origin属性可以定义背景图片的起始位置，该属性有三种取值：padding-box、border-box、content-box，具体如例所示：

#example1 {
    border: 10px double black;
    padding: 25px;
    background: url('https://logo.zhuanfou.com/bash.png');
    background-repeat: no-repeat;
    background-origin: padding-box;
}

#example2 {
    border: 10px double black;
    padding: 25px;
    background: url('https://logo.zhuanfou.com/bash.png');
    background-repeat: no-repeat;
    background-origin: border-box;
}

#example3 {
    border: 10px double black;
    padding: 25px;
    background: url('https://logo.zhuanfou.com/bash.png');
    background-repeat: no-repeat;
    background-origin: content-box;
}

 

使用background-size来定义背景图片的尺寸

属性background-size的默认取值是auto，即按原有尺寸展示；如果想自定义背景图片的显示尺寸，设置该属性为指定宽度、高度即可，如案例所示：

background-size: 30px 30px;

 

使用background-clip来定义背景的起始范围

与background-origin有点像，只是background-clip是用来定义背景效果的起始范围，三种取值：padding-box、border-box、content-box，具体如例所示：

#example1 {
    border: 10px double black;
    padding: 25px;
    background: LightBlue;
    background-clip: padding-box;
}

#example2 {
    border: 10px double black;
    padding: 25px;
    background: LightBlue;
    background-clip: border-box;
}

#example3 {
    border: 10px double black;
    padding: 25px;
    background: LightBlue;
    background-clip: content-box;
}

CSS 边框

CSS中border相关属性可定义元素边框样式、粗度、颜色等信息。

只用border属性来杂糅实现边框宽度、边框的风格、边框的颜色三类属性，如下：

/* 分别是 width style color */
p {
    border: 5px solid #46acb6;
}

设置圆角的边框

border-radius属性可以用来将边框的直角设置成圆角，该属性的取值即为圆角的半径。

/* 左上角、右上角、右下角、左下角 */
p.round2 {
    border: 2px solid Tomato;
    border-radius: 2px 5px 8px 12px;
}

CSS 外边距

CSS 外边距（margin）

CSS中margin属性用来定义元素的外边距。什么是外边距呢？也就是此元素四周都会空出指定宽度的空白间距，这个事情比较难说清楚，直接看例子来试试吧：

p {
    border: 1px solid #46acb6;
    margin: 72px;
}

Margin - 单独设置各方向的外边距

margin属性可设置元素四周的外边距距离，那如果想对上下左右不同方向分别单独设置外边距距离，则可使用到如下四种属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

案例：

p {
    margin-top: 90px;
    margin-bottom: 36px;
    margin-right: 72px;
    margin-left: 108px;
}

或者：

p {
    margin: 90px 72px 36px 108px;
}

Margin的auto属性

margin属性的取值可以是auto，该取值的作用是让浏览器自动设置外边距以保证该元素水平方向上居中；一般情况下，取值auto前，都会设置好该元素的宽度；浏览器会保证左边距和右边距相等，且恰好这个值可以使元素水平方向上在正中间。

div {
    width: 300px;
    margin: auto;
    border: 1px solid #46acb6;
}

如果有时上下边距也需要特别设定，则可以如下分开设置，效果也是可以保证的：

div {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
    margin-bottom: 36px;
    border: 1px solid #46acb6;
}

CSS 内边距

CSS padding

在CSS中padding属性被用来定义元素的内边距，即该元素内容与边框之间的空白间距。通过CSS进行设置，不仅能整体控制内边距，还能分别设置上、下、左、右方向的内边距。

Padding - 分别设置上下左右的内边距

通过如下属性可以分别定义上、下、左、右方向的内边距：

  • padding-top - 上内边距
  • padding-right - 右内边距
  • padding-bottom - 下内边距
  • padding-left - 左内边距

内边距属性的取值有如下方式：

  • 数值加单位 - 可用px、pt、cm等单位
  • % - 可以用百分比

案例如下：

div {
    padding-top: 150px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

或者：

div {
    padding: 150px 30px 50px 80px;
}

Padding 和 Width 二三事

div元素的宽度值虽然被设置成300px，但是实际上其表现出的宽度应该是350px，即300px宽度，加上25px左边距，再加上25px右边距。

div {
    width: 300px;
    padding: 25px;
}

但是，如此元素宽度就很难限定，因此，大多情况下更佳的实践方式是把box-sizing这个值设定成border-box，这样就可以保证内边距不会对元素宽度产生影响。

div {
    width: 300px;
    padding: 25px;
    box-sizing: border-box;
}

HTML元素的宽度和高度

HTML元素的宽度和高度特指该元素content内容部分、padding内边距部分和border边框部分合在一起的宽度和高度，不包括元素的外边距部分。

元素总宽度 = 左边框宽度 + 左内边距宽度 + width（内容部分宽度）+ 右内边距宽度 + 右边框宽度

总高度的计算方式如下：
元素总高度 = 上边框宽度 + 上内边距宽度 + height（内容部分高度）+ 下内边距宽度 + 下边框宽度

 

CSS Outline轮廓

CSS Outline轮廓

所谓轮廓就元素边框（Border）之外的线。其目的就是让该元素更加显目。

使用outline属性进行通吃

.ex4 {outline: thick ridge #46acb6;}

Outline Offset

CSS中的outline-offset属性的取值一般是数值加单位，诸如15px这样，其定义的是轮廓（outline）与边界（border）之间的空白透明间距，取值即为该空白间距的宽度。

p {
    margin: 30px;
    background: #eef8f8;
    border: 1px solid #46acb6;
    outline: 1px solid Tomato;
    outline-offset: 15px;
}

CSS 文本

文本装饰 Decoration （划线方式）

CSS中的text-decoration属性是用来定义文本装饰方式，实际上就是让该文本的划线样式：上划线（overline）、中划线（line-through）、下划线（underline）抑或是不被划线（none）

a {
    text-decoration: none;
}

文本字母大小写样式

CSS中的text-transform属性，可以控制文本元素中的字母的大小写样式，取值如下：

  • uppercase - 全部字母转为大写字母
  • lowercase - 全部字母转为小写字母
  • capitalize - 所有单词首字母自动大写
.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

文本首行缩进 Indent

CSS中的text-indent属性是用来定义文本首行缩进距离。如下例所示：

p {
    text-indent: 256px;
}

文本字符间距

CSS中的letter-spacing可用来定义文本的字符间距，如下例所示：

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

行高 line-height

CSS中的line-height属性可用来定义文本的行高。行高的取值如下：

  • 具体的数值加单位 - 譬如36px这种形式
  • 表示百分百的数字，但习惯上并不用%，而是用实数来表示 - 比如1.2代表1.2倍行高
.small {
    line-height: 0.7;
}

.big {
    line-height: 1.8;
}

文本方向 Direction

CSS中的direction属性可以定义文字的方向，该属性可取值：

  • rtl - right to left的缩写，即文本方向是从右向左
  • ltr - left to right的缩写，即文本方向是从左到右
p {
    direction: rtl;
}

词距 word-spacing

CSS中的word-spacing属性可以用来定义文本中单词之间的距离，该属性主要是针对拉丁字母构成的文本。试试下面的例子吧~

h1 {
    word-spacing: 24px;
}

h2 {
    word-spacing: -12px;
}

文本阴影 text-shadow

CSS中的text-shadow可以设置文本的阴影，如下例所示：

h1 {
    text-shadow: 3px 2px #46acb6;
}

让文本不会断行

如果想强制一段文本不会换行，可以如下例所示：

div {
    white-space: nowrap;
}

字体种类 font-family

字体粗细 font-weight

字体大小 font-size（使用像素px为单位来设置；使用em为单位来设置；使用vw来设置字体大小（不常用））

字体风格 font-style（normal - 就是正常状态，不倾斜（默认就是这种）；italic - 定义字体为斜体；）

 

CSS 链接

链接元素的CSS样式

链接元素相关的CSS样式有很多，诸如文本颜色color、背景样式background、边框样式border、轮廓样式outline、划线风格text-decoration等。

a {
    color: White;
    background: Tomato;
    border: 7px solid #46acb6;
    outline: 7px solid #d4d854;
    text-decoration: overline;
}

跟链接元素相关的伪类

链接元素配合如下几种不同的伪类，则有不同的展示方式：

/* 没有被访问过的链接 */
a:link {
    color: blue;
}

/* 访问过的链接 */
a:visited {
    color: gray;
}

/* 被鼠标悬停在上方的链接 */
a:hover {
    color: green;
}

/* 被选中的链接元素 */
a:active {
    color: red;
}

CSS 列表

列表属性

HTML列表分为两类，无序列表和有序列表；无序列表通过ul元素定义，有序列表通过ol元素定义。在CSS中列表相关属性的主要功效如下：

  • 控制无序列表的标记样式
  • 控制有序列表的标记样式
  • 自定义图片作为标记物
  • 改变列表背景、颜色、字体等属性

 

HTML 有序列表的标记样式

通过设置<ul>标签的type属性即可设置标记的样式。

自定义图片作为标记物

通过CSS中的list-style-image属性即可自定义某张图片作为列表的标记物。如下：

ul {
    list-style-image: url('https://logo.zhuanfou.com/program-logo-60.png');
}

标记物的位置

CSS中的list-style-position属性可定义标记物的位置，如果取值outside标记物则在列表内容之外，若取值inside标记物则在列表内容之内，但缩进依然存在。

删除默认设定

通过CSS中的list-style-type:none这种属性与取值，可以删除浏览器关于列表样式的默认设置；为了显得更纯粹，最好把列表元素的内边距padding和外边距margin都设置成零。如下例子所示：

ul.demo {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

列表 list-style直接通吃

要分别声明list-style-type、list-style-position、list-style-image有点麻烦，记这么多的属性名有点费事，所以用list-style来通吃上述三种属性。

CSS 表格

表格边框 Table Borders

如CSS边框所述，表格元素也适用border属性。

如下例，设置table、th、td元素的边框（因为这三个元素都设置了边框，所以看上去表格呈现双线边框）：

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

合并表格边框

明明设置的是单线，最终却呈现出双线，有点事与愿违的感觉；为了解决这个问题，可以将table元素的border-collapse属性设置成collapse就ok啦。

table {
    border-collapse: collapse;
}

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

只设置表格外边框

如果想只设置表格外边框，而不设置内部单元格边框，直接仅设置table元素即可：

table {
    border: 1px solid black;
}

设置表格的宽度和高度

通过设置表格或单元格的width和height属性即可。看下例，将表格的整体宽度设置成100%宽，表头的单元格高度则设置成72px高。

table {
    width: 100%;
}

th {
    height: 72px;
}

水平对齐

CSS中的text-align属性可以设置表头或者普通单元格的内容在水平方向上的对齐方式。其中表头（th元素）内容默认情况下是居中，而普通单元格（td元素）的内容默认是左对齐。

th {
    text-align: left;
}

 

垂直对齐

CSS中的vertical-align属性可以设置表头或者普通单元格的内容在竖直方向上的对齐方式（top/midddle/bottom）；默认情况下，表头和普通单元格在垂直方向上都默认取值居中。

th, td {
    height: 72px;
    vertical-align: bottom;
}

表格内边距 Padding

设置一下表格的内边距padding属性，看起来会更加清爽一些：

th, td {
    padding: 16px;
}

 

只设置横线进行分割

如下所示，试一试呗：

th, td {
    border-bottom: 1px solid #46acb6;
}

通过伪类设置单元格hover状态的样式

当单元格被鼠标悬浮，即出发该单元格hover状态下的样式设置；如下例所示，利用:hover伪类选择器来设置tr元素（行元素）hover状态下的CSS样式。

tr:hover {
    background-color: #eef8f8;
}

利用奇偶伪类实现条纹形表格

伪类:nth-child()选择器可以区分奇数行与偶数行；tr:nth-child(even)代表偶数行，tr:nth-child(odd)代表奇数行。

/* 奇数行 odd */
tr:nth-child(odd) {
    font-style: italic;
}

/* 偶数行 even */
tr:nth-child(even) {
    background-color: #eef8f8;
}

表格色彩 Color

CSS中的color属性和background-color属性也适用于表格元素。以设置表头th元素的相关色彩为例：

th {
    background-color: #46acb6;
    color: White;
}

表格太大了怎么办？

如果显示的空间有限，表格太大了，这该如何处理呢？很简单，在表格table元素外添加一个容器元素（比如div元素即可），然后把外部容器元素设置上overflow-x:auto这个属性与取值，这样就可以通过滚动条去查看超出范围的表格内容，这种实践方法是一个不错的解决方案。

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
CSS概述
abu1216的博客
11-30 247
CSS概述 什么是CSS？(了解) CSS: 层叠样式表，用于修饰、渲染网页的一门技术 使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力！ 在HTML中引入CSS 方式1：通过style属性引入css（不推荐） <!-- 1.通过标签上的style属性给div设置样式 边框:2px solid red 字体大小:26px 背景颜色为:pink --> <div style="bor...
html+css知识点复习回顾，复习参考
weixin_55935744的博客
11-28 1328
这里写自定义目录标题一、HTML部分1、两个盒子2、图像标签3、相对路径和绝对路径4、超链接标签5、表格标签6、列表标签7、表单标签8、HTML5新特性二、CSS部分1、CSS选择器2、CSS字体属性3、CSS文本属性4、CSS引入方式5、CSS的元素显示模式6、CSS的背景样式7、CSS三大特性8、盒子模型9、传统网页布局的三种方式10、CSS属性书写顺序（规范代码）11、元素的显示与隐藏12、CSS高级技巧13、CSS3新特性 一、HTML部分 1、两个盒子 <div>、<span&g
小白学习css的第一天
A__xy的博客
11-01 961
css第一天总结 css简介 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。 CSS 最大价值: 由 HTML 专
div的定位（3）
chenshizero的专栏
10-10 1051
（7）给包含块一个高度，或者说给定位对象的父级设定一个高度。不然也许显示的结果并不是你想要的。在下面的例子中，如果你本意要实现下面效果：把小盒子在父盒子中的左上角垂直往下偏移，上方留出一块区域，如果你删除了box1的高度会怎么样呢？自己测试一下吧。DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www
2023前端面试题及答案整理（CSS布局）
suli77的博客
02-09 767
2023前端面试题及答案整理（CSS布局）
CSS教程基础
优快云515的专栏
09-19 2484
CSS教程基础 一、CSS 高度_cssheight DIV CSS高度基础知识 这里的CSS高度是指通过CSS来控制设置对象的高度。使用CSS属性单词height。单位可以使用PX，em等常用使用PX（像素）为单位。 实例： .yangshi{height:300px;}即设置了yangshi选择器对象高度为300px。 CSS高度单词：height CSS 最大高度：max
Web前端系列技术之CSS基础（从入门开始）①
小柴爱程序的博客
07-22 957
Java系列技术之CSS基础（从入门开始）
普歌-前端复习总结HTML+CSS-超详细，超全面（内容较多，建议收藏）
热门推荐
weixin_52791256的博客
04-05 1万+
普歌-HTML5+CSS复习总结一.HTML基础二级目录三级目录 一.HTML基础 二级目录 三级目录
WEB前端学习 （2）CSS复习一（基础选择器+字体属性+文本属性+引入方式）
Puppy_CQ的博客
04-27 194
一 CSS语法规范 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 也叫CSS 样式表或级联样式表。 CSS 是也是一种标记语言 CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离 二 CSS基础选择器 （选择器分为基础选择器和复合选择器） 总结：基础选择器 每个基础选择器都有使用场景，都需要掌握 如果是修改样式， 类选择器是使用最多的 选择器就是..
WEB前端学习 （5）CSS复习四（盒子模型）
Puppy_CQ的博客
04-27 548
页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页 网页布局的本质：就是利用 CSS 摆盒子。 网页布局过程： 1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。 3. 往盒子里面装内容. 1.盒子模型 盒子模型（Box Model）组成 所谓 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本
CSS初级单选题
BaiBai
11-23 1万+
1. 下列使用复合选择器声明CSS的方式中，正确的是（ D ） A、p；h1{color:red;} B、.one{color:red;} C、#two{color:red;} D、p,h1,a{color:red;} 2. 以下的CSS中，可使所有<p>元素变为粗体的正确语法是? （ C ） A、<p style="font-size:bold"> B、...
div 总宽度
crisis111的专栏
04-17 671
div总宽度等于width+padding+border-left+border-right  ，如果一个父div的宽度等于327px  那么子div的width:307px  padding-left:9px  padding-right:9px  border-left:1 px border-right:：1px  一个div设置了width 后，不是这个div的宽度，只是设置了这个div
CSS的选择器和常用样式（id，class,组合，字体，背景，宽度，高度，颜色等CSS样式）
wyqwilliam的博客
11-05 2054
&lt;html&gt; &lt;head&gt; &lt;title&gt;CSS的选择器和常用样式&lt;/title&gt; &lt;meta charset="UTF-8"/&gt; &lt;!--声明css代码域--&gt; &lt;style type="text/css"&gt; /*ID选择器*/ #div01
div浮动居中
qq_34307209的博客
09-05 789
使浮动的div居中样式 position: absolute;top:50%;left:50%;margin-left:-300px; margin-top:-150px； margin-left:-300px; 这个值是DIV宽度的一半， margin-top:-150px; 是DIV高度的一半。
html固定div宽度自适应,css自适应布局：css宽度自适应如何实现？
weixin_29206669的博客
06-10 2445
如今的网页布局是需要适应于各种屏幕的，因此就需要来实现自适应使得网页中的内容来完全的显示，所以，今天的这篇文章就来给大家介绍一下关于css宽度自适应的内容。详细的说一说css自适应布局中css宽度自适应该如何实现。我们经常会看到这样的页面，左侧(或者右侧)为固定的导航或者菜单栏，另一侧将会随着浏览器的缩放而自适应改变其大小，这其实就是宽度自适应的实现。css宽度自适应中最常见的实现方法有两种，一种...
margin取负值详解
weixin_42718310的博客
09-08 3287
Margin取负值 Margin-left: （1） 子集总宽度宽度不超过父级宽度时（不换行） margin-left取负值表示包含块向左移动，使包含块的左边距减去前面元素的右边距为指定负值。 实际应用情况： .wrapper { background-color: black; margin: 0 auto; width: 600px; height: 300px; } .left, ...
普通流中块级元素的水平格式化和margin
u010250808的博客
11-05 560
普通流中块级元素的水平格式化我们普遍认为，普通流中块级元素的布局比较易预测，水平方向的表现于垂直方向上还要更容易，通常依据父元素的宽度就很容易确定，但也有让人惊讶的部分，比如元素在水平方向的auto值会有何影响，子元素为什么有时候在水平方向上会超出父元素的内容区，要清楚这些原因就要了解元素在水平方向的格式化原理。水平方向的宽度依赖继承父元素水平格式化往往没有想象的那样简单，其中部分原因是width影
CSS学习3-21
TomCruisePro的博客
03-21 206
1.外部样式表 当样式 通过外部引入时，需要使用link链接 2.text-align对齐方式 3.text-decoration:该属性主要是用来删除链接的下划线的 4.背景附着，属性指定背景图像是应该滚动的还是附着的 固定的：attachment:fixed 一起滚动的：scroll 5.边框border，可以设置大小，形状，颜色等属性 6.外边距，可以设置 auto:浏览器计算外边距 length：以px,em,pt等单位计算外边距 %：指定以包含元素宽度的百分比计的外边距，inherit指定从父元素
CSS3 :nth-child()伪类选择器
weixin_34326429的博客
12-27 371
CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child(...
东北大学软件学院2017年Web开发技术课程资料
课件中可能包含了详细的解释和图示，便于学生自学和复习。 ### 综合知识点： - **东北大学软件学院**在Web开发技术教育方面可能有其特定的教育理念和方法。作为中国顶尖的高等学府之一，东北大学软件学院在Web开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值