三、CSS基础部分

最新推荐文章于 2022-10-26 10:17:49 发布

养只狗

最新推荐文章于 2022-10-26 10:17:49 发布

阅读量304

点赞数

分类专栏：前端复习部分文章标签： html css

本文链接：https://blog.csdn.net/weixin_45006204/article/details/106533870

版权

前端复习部分专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS背景

background-color背景颜色
CSS中，颜色值通常以下列方式定义:
十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”
background-image背景图像
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

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

background-repeat设置背景图的平铺方式
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，就可以通过background-repeat设置平铺方式，repeat-x水平方向平铺、repeat-y垂直方向平铺，如果你不想让图像平铺，你可以使用no-repeat 属性:

//水平平铺
background-repeat:repeat-x;
//不平铺
background-repeat:no-repeat;

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
background-position设置背景图的位置
有时候为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

background-position:right top;

在这里插入图片描述

背景属性简写

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

当使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position
以上属性无需全部使用，你可以按照页面的实际需要使用.

CSS文本格式

color设置文字颜色
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
text-align设置文本对齐方式
line-height设置文本行高
direction设置文字方向
letter-spacing 设置字符间距，这个属性在英文中使用时，是设置字母与字母之间的间距，汉字的间隔调节也是用 letter-spacing 来实现的。因为中文段落里字与字之间没有空格，因而 word-spacing 通常起不到调整间距的作用。

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

在这里插入图片描述

text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距，这个属性在英文中使用时，是设置单词与单词之间的间距。

CSS字体

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

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

font-style字体样式设置斜体文字的字体样式属性。
这个属性有三个值：
normal- 正常显示文本
italic - 以斜体字显示的文字
oblique - 文字向一边倾斜（和斜体非常类似，但不太支持）
italic 和 oblique 的区别
但是并不是所有字体都有粗体、斜体、下划线、删除线等诸多属性，一些不常用的字体，或许就只有个正常体，如果你用 italic，就没有文字倾斜的效果了，这时候你就要用 oblique，可以理解成 italic 是使用文字的斜体，oblique 是让没有斜体属性的文字倾斜！
在 CSS2.0 中的解释：italic 和 oblique 都是向右倾斜的文字, 但区别在于italic 是指斜体字，而 oblique 是倾斜的文字，对于没有斜体的字体应该使用 oblique 属性值来实现倾斜的文字效果。
font-size 设置文本的大小。
字体大小的值可以是绝对或相对的大小。
绝对大小：
设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
相对大小：
相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
1.使用像素单位（px）设置文字大小

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

2.使用em单位设置文字大小
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。em的尺寸单位由W3C建议。
转换公式：px/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

在IE浏览器中。调整文本的大小时，会比正常的尺寸更大或更小。
3.使用百分比和em单位结合来设置字体大小
在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小，解决的IE浏览器与正常尺寸不同的问题
首先以百分比的形式设置 <body>元素的字体大小，然后再以em的形式设置其他段落的字体大小

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

CSS链接

链接的四种状态：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
链接样式的顺序记忆：
L(link)OV(visited)E and H(hover)A(active)TE

CSS列表样式

CSS列表属性作用如下：
设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

list-style-type设置列表样式
circle：无序列表的项目符号为空心圆
square：无序列表的项目符号为实心圆
upper-roman：有序列表的序号格式为罗马数字
lower-alpha：有序列表的序号格式为小写字母

<style>
	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;
	}
</style>

<body>
	<p>无序列表实例:</p>
	
	<ul class="a">
	  <li>Coffee</li>
	  <li>Tea</li>
	  <li>Coca Cola</li>
	</ul>
	
	<ul class="b">
	  <li>Coffee</li>
	  <li>Tea</li>
	  <li>Coca Cola</li>
	</ul>
	
	<p>有序列表实例:</p>
	
	<ol class="c">
	  <li>Coffee</li>
	  <li>Tea</li>
	  <li>Coca Cola</li>
	</ol>
	
	<ol class="d">
	  <li>Coffee</li>
	  <li>Tea</li>
	  <li>Coca Cola</li>
	</ol>
</body>

运行结果：
在这里插入图片描述

list-style-image: 将图片设置为列表的项目符号

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

运行结果：
在这里插入图片描述
上面的例子在所有浏览器中显示并不相同，IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下

ul
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul li
{
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 14px; 
}

list-style-position设置相对于对象的内容绘制列表项标记。
简写属性
简写属性顺序：
list-style-type
list-style-position
list-style-image
如果上述值丢失一个，其余仍在指定的顺序，就没关系。

 list-style: square  url("sqpurple.gif");

CSS表格样式

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

border-collapse: collapse; 的运行结果
border-collapse: separate; 的运行结果

CSS盒子模型

CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：
标准盒子模型的盒子宽度：左右border+左右padding+width
IE盒子模型的盒子宽度：width
在CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，box-sizing:border-box表示的是IE盒子模型
，box-sizing:padding-box,这个属性值的宽度包含了左右padding+width
在这里插入图片描述
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

CSS边框样式

border-style设置边框的样式
border-width 设置边框指定宽度。
1.使用 px/em 单位设置长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
2.使用关键字设置长度值，它们分别是 thick 、medium（默认值）和 thin。
注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。
border-color属性用于设置边框的颜色
简写属性
顺序：
border-width
border-style (required)
border-color

border:5px solid red;

CSS 轮廓

outline 属性规定元素轮廓的样式、颜色和宽度。
outline-width设置宽度
outline-style的属性值同border-style

设置的属性分别是（按顺序）：outline-color, outline-style, outline-width，如果不设置其中的某个值，也不会出问题

p {
	outline:#00FF00 dotted thick;
}

CSS内外边距

在这里插入图片描述

margin属性margin(外边距)属性定义元素周围的空间。
可以有一到四个值。
1、margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
2、margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px/
3、margin:25px 50px;
上下边距为25px
左右边距为50px
4、margin:25px;
所有的4个边距都是25px
padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
padding值的设置同margin

CSS 分组和嵌套选择器

分组选择器

h1,h2,p
{
    color:green;
}

嵌套选择器
例子：为所有 class=“marked” 元素内的 p 元素指定一个样式

.marked p
{
    color:white;
}

CSS 尺寸 (Dimension)属性

height 设置元素的高度。
width 设置元素的宽度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。

CSS Display(显示) 与 Visibility（可见性）
display 属性规定元素应该生成的框的类型。
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
visibility属性指定一个元素是否是可见的
visible 默认值。元素是可见的。
hidden 元素是不可见的。
collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit 规定应该从父元素继承 visibility 属性的值。
display：none和visibility：hidden隐藏元素的区别
visibility：hidden，该元素隐藏起来了，但不会改变页面布局，隐藏的元素仍需占用与未隐藏之前一样的空间，但是不会触发该元素已经绑定的事件
display：none，把元素隐藏起来，并且会改变页面布局，隐藏的元素不会占用任何空间，可以理解成在页面中把该元素删除掉。
ps:
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

CSS Position(定位)

默认定位static
默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者 z-index 声明）。
相对定位relative
相对定位元素的定位是相对其正常位置，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
固定定位fixed
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动，Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。
绝对定位absolute
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于，absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
粘性定位sticky
基于用户的滚动位置来定位，在 position:relative 与 position:fixed 定位之间切换。
当页面未超出目标区域时，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
inherit
规定应该从父元素继承position 属性的值。
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）一个元素可以有正数或负数的堆叠顺序：

CSS布局

overflow 属性用于控制内容溢出元素框时显示的方式，只工作于指定高度的块元素上。
overflow: visible默认值。内容不会被修剪，会呈现在元素框之外。
overflow: hidden 内容会被修剪，并且其余内容是不可见的。
overflow: scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow: auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

当文本超出时，overflow:scroll; 与 overflow:auto; 都会出现滚du动条。
当文本没有超出版元素区域时，overflow:auto; 并不会出现滚动条，而overflow:scroll; 依旧会显示滚动条。

CSS Float(浮动)

如何理解CSS浮动呢？
1、当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘，框2和框3向上移动，填补空缺
在这里插入图片描述
2、当框 1 继续向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，框 2被框1覆盖，使框 2 从视图中消失。

3、如果三个框都设置了浮动，当三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
在这里插入图片描述
4、如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。

5、如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

float 属性定义元素在哪个方向浮动。设置了浮动的元素会脱离文档流，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框。
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
清除浮动：
参考：https://blog.csdn.net/h_qingyi/article/details/81269667

CSS布局

margin: auto;元素居中对齐
如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。
text-align: center;文本居中对齐
图片居中对齐
先将img元素显示为块级元素，再设置margin属性

img {
    display: block;
    margin: auto;
    width: 40%;
}

左右对齐
1、使用定位 position
对需要左对齐或右对齐的元素设置绝对定位absolute，然后设置left： 0；（左对齐）right：0；（右对齐）

<style>
	.right {
	    position: absolute;
	    right: 0px;
	    width: 300px;
	    border: 3px solid #73AD21;
	    padding: 10px;
	}
</style>
<body>
	<h2>右对齐</h2>
	<p>以下实例演示了如何使用 position 来实现右对齐:</p>
	<div class="right">
	 	<p>菜鸟教程 -- 学的不仅是技术，更是梦想！！</p>
	</div>
</body>

运行结果：
在这里插入图片描述

当使用 position 来对齐元素时, 需要<body> 元素设置margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。
2、使用浮动 float
float: right; / float: left;
注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候就需要清除浮动了。
不管是使用 position还是 float 属性，IE8 以及更早的版本都会存在存在一个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。因此，请始终设置 !DOCTYPE 声明：

文本的垂直居中对齐
1、使用padding
只设置上下的padding值，左右的padding值为0

 padding: 70px 0;

2、使用line-height
使line-height与元素的height一致，设置line-height可以使文本在垂直方向居中，设置text-align可以使文本在水平方向居中

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

CSS 组合选择符

后代选择器(以空格分隔)

div p
{
  background-color:yellow;
}

子元素选择器(以大于号分隔）

div>p
{
  background-color:yellow;
}

相邻兄弟选择器（以加号分隔）
选取所有指定元素之后的第一个相邻兄弟元素。

div+p
{
  background-color:yellow;
}

后续兄弟选择器（以破折号分隔）
选取所有指定元素之后的相邻兄弟元素。

div~p
{
  background-color:yellow;
}

CSS 伪类(Pseudo-classes)

CSS伪类是用来添加一些选择器的特殊效果。
由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

anchor伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
a:link {color:#FF0000;} /* 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
a:hover {color:#FF00FF;} / 鼠标划过链接 /
a:active {color:#0000FF;} / 已选中的链接 */
伪类和CSS类
伪类可以与 CSS 类配合使用：

a.red:visited {color:#FF0000;}       
<a class="red" href="css-syntax.html">CSS Syntax</a>

CSS :first - child伪类
您可以使用 :first-child 伪类来选择第一个元素，如：下列代码将会选择整个页面中第一个p标签

p:first-child {
	color:blue;
}

- :lang 伪类为不同的语言定义特殊的规则
  注意：IE8必须声明<!DOCTYPE>才能支持;lang伪类。
  在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：

<style>
q:lang(no)
{
	quotes: "~" "~";
}
</style>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE已经声明时 IE8支持 :lang.</p>
</body>

运行结果：Some text ~A quote in a paragraph~ Some text.

CSS 伪元素

:first-line 伪元素向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化：
“first-line” 伪元素只能用于块级元素。

p:first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}

:first-letter 伪元素
“first-letter” 伪元素用于向文本的首字母设置特殊样式。

p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}

:before 伪元素
“:before” 伪元素可以在元素的内容前面插入新内容。
:after 伪元素
“:after” 伪元素可以在元素的内容之后插入新内容。

CSS 属性选择器

属性选择器
下面的例子是把包含标题（title）的所有元素变为蓝色：

[title]
{
    color:blue;
}

属性和值选择器
下面的实例改变了标题title='runoob’元素的边框样式:

[title=runoob]
{
    border:5px solid green;
}

属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:

  [title~=hello] { color:blue; }

养只狗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三、CSS基础部分

CSS背景background-color背景颜色CSS中，颜色值通常以下列方式定义:十六进制 - 如："#ff0000"RGB - 如：“rgb(255,0,0)”颜色名称 - 如：“red”background-image背景图像默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.body { background-image:url('paper.gif');}background-repeat设置背景图的平铺方式一些图像如果在水平方向与垂直方向平铺，这样看起来很
复制链接

扫一扫