CSS基础 - 4+6+9

已于 2023-04-20 10:13:30 修改
阅读量626 收藏
点赞数
分类专栏： Web 文章标签： css html css3
于 2023-03-10 11:54:28 首次发布
极正君
本文链接：https://blog.csdn.net/qq_44098341/article/details/129439245
版权
本文深入探讨CSS基础，从CSS选择器的定义、发展历史、语法结构，到内嵌、内部和外部样式表的使用，以及如何链接和导入外部样式表。此外，还详细讲解了CSS元素属性，包括文本、字体、表格、列表和定位属性等，重点解析了position属性的使用原则和浮动特性。
摘要由CSDN通过智能技术生成

CSS基础-由表及里

文章目录

Chapter01 CSS选择器

1. CSS概述

1.1 定义

  • CSS是Cascading Style Sheets 的缩写，中文的意思是层叠样式表或级联样式表。
  • CSS可以用来精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、边框等。
  • 使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。

1.2 发展史

  • 早先在页面排版时，内容与样式的混合设计方式将导致页面代码过于臃肿，难以维护，不利于搜索引擎的检索
  • CSS层叠样式表，将页面内容与样式分离，单独控制HTML标签的样式，如页面布局、字体、颜色、背景和图文混排效果
  • 一个CSS样式可以在多个页面应用，当用户修改CSS样式文件时，所有应用改样式的页面均会改变，有利于风格控制

1.3 语法结构

样式是CSS的基本单位，每个样式分为 ：选择器**(Selector)** 和 声明**(Declaration)** 两个部分:

  • 第一项必须为选择器或者选择器表达式，选择器后紧跟一对大括号，
  • 大括号内是由属性和值的键值对组成的声明组，键值对间用冒号连接，组间用分号隔开
  • 建议可以每个声明独占一行并进行缩进
  • 例如：通过标签选择器，设置div 和span元素
/* 设置子div/span元素在父级div元素中水平垂直居中,且父级div横向优先排列 */
div{
    color: #FFFFFF;
    font:small-caps bold 16px/14px Cambria,Microsoft Yahei;
    background: #2983bb;
    width: 280px;
    height: 180px;
    margin: 1em;
    display: inline-flex;
    justify-content: center;    /* 水平居中 */
    align-items: center;        /* 垂直居中 */
}
div span{
    border: 1px dotted #FFFFFF;
    position: absolute;
    padding: 40px;
}

2. CSS的使用

CSS样式有三种样式：内嵌样式表、内部样式表、外部样式表（链接样式表、导入样式表）

2.1 内嵌样式表(行内样式表)

  • 内嵌样式又称行内样式，将CSS样式嵌入到HTML标签中可以很简单地对某个标签单独定义样式。
  • 内嵌样式相对比较灵活，但只对当前标签有效，作用范围小。在页面中大量使用内嵌样式会导致页面代码臃肿，不利于后期维护，所以尽量不要使用内嵌样式。
<p style="color: red; background:  yellow;">内嵌样式表 - style属性</p>

2.2 内部样式

  • 内部样式表将CSS样式从HTML标签中分离出来，使得HTML代码更加整洁，而且CSS样式可以被多次使用。
  • 内部样式表是一种写在Style标签中的样式，声明仅对当前页面有效。
  • 一般情况下Style标签位于Header标签之内，在页面加载过程中，先加载样式，后加载页面元素。
<style type="text/css">
	h1{color:#033;border: dashed 1px #6600CC;}   
	hr{width:  95%;text-align: center;}      
	span{font-weight:bold;} 
</style>

2.3 外部样式表

  • 外部样式表是将CSS样式以独立的文件进行存放，然后在页面中引入该外部样式表，这可以让网站中的部分页面和所有页面引用同一个样式文件使页面的风格保持一致，有利于页面的维护与更新从而降低网站的维护成本。
  • 用户浏览页面时CSS样式会被暂时缓存，继续浏览其他页面时会优先使用缓存中的CSS文件，避免重复从服务器上下载从而提高了网页的加载速度。
2.3.1 链接外部样式表

在HTML中link标签用于将文档与外部资源进行关联经常用于链接网页中的外部样式表。

标签常见的属性有：type、rel、href属性
  • type属性：用于设置链接目标文件的MIME类型。CSS样式表中的MIME类型是test/CSS
  • rel属性：用于设置链接目标文件与当前文档的关系。外部文件的类型是CSS文件
  • href属性：用于设置链接目标文件的URL地址.
<link type="text/css"  rel="stylesheet" href="css/4-3Style.css" />
2.3.2 导入外部样式表

外部样式表是指在页面的内部样式表中导入一个外部样式表其语法格式如下：

@import css/4-3Style.css;			/* 此种方法只支持IE */   
@import url("css/4-3Style.css");	/*此方法支持IE,火狐，欧朋等 */
类型解释
语法@ import 样式文件的引用地址
@ import URL(“样式文件的引用地址”)
说明@ import关键字用于导入外部样式表
URL中等的引用地址需要用引号引起来否则会有浏览器不支持
在Style标签中@ import语句需要位于内部样式表之前样式表的优先级
注意不管从显示效果还是网站性能上看，link 链接外部样式表 方式更具优势，应优先考虑

2.4 样式表的优先级

  • 多重样式表（Mulitple Styles）：

    • 指外部样式表、内部样式表和内嵌样式同时应用于页面中的某一个元素。
    • 在多重样式表的情况下，样式表的优先级采用**就近原则****。**一般情况下多重样式的优先级由高到低的顺序是：内嵌 ->内部 ->外部->浏览器缺省默认模式
    • 如果header内部和外部样式的位置，违反规则掉换成，外部样式在内部样式之后，此时优先级：内嵌 - > 外部 - > 内部 - > 浏览器缺省默认。但不建议违反规则调换。

3. CSS选择器

本文收录4类5种29个

3.1 基本选择器

细分语法 / 示例
通用选择器{property1:value1;property2:value2;…}
{font-size: 12px; color: red;}
标签选择器element{property1:value1;property2:value2;…}
p{font-family: 楷体;}
类选择器.classname{property1:value1;property2:value2;…}
.myClass{width: 970px; background-color: #CCCCCC;}
ID选择器#idvalue{property1:value1;property2:value2;…}
#myId{color: red;text-decoration: line-through;}

3.2 组合选择器

细分语法 / 示例
多元素选择器selector1,selector2,…{property1:value1;…}
p,div{font-size:14px ;color: blue;}
后代选择器selector1 selector2 …{property1:value1;…}
div p{background-color: #CCC;}
子选择器selector1 > selector2 >…{property1:value1;…}
div > p{font-weight: bold;border:solid 2px #066;}
相邻兄弟选择器selector1 + selector2 + … {property1:value1;…}
h3 + p{font -weight:bold;}
普通兄弟选择器selector1 ~ selector2 ~ …{property1:value1;…}
h3 ~ p{background: #CCC;}

3.3 属性选择器

细分语法 / 示例说明
存在选择器element[attribute]{property1:value1;…}
div[ id ]{font-family: “microsoft yahei”;}		任何带有Id属性的div标签
相等选择器element[attribute=value]{property1:value1;…}
p[name=“teaName”]{font-weight: bold;}		name属性是teaName的p标签
包含选择器element[attribute~=value]{property1:value1;…}
p[name~=“stu”]{color: red;}		name属性中包含”stu"单词，
并于其他内容通过空格隔开
连接子符选择器element[attribute|=value]{property1:value1;…}
p[name =“zh”]{background-color: #999;}		lang属性是zh或者以“zh-”开头的子串所有p标签
子串选择器element[attribute*=value]{property1:value1;…}
p[title*=“zh”]{font-size: 12px;}		title属性值包含“zh“子串的所有p标签
前缀选择器element[attribute^=value]{property1:value1;…}
p[title^=“ch”]{block-size: 20px;}		title属性值以“ch”开头的所有p标签
后缀选择器element[attribute = v a l u e ] p r o p e r t y 1 : v a l u e 1 ; . . . < b r / > p [ t i t l e =value]{property1:value1;...}<br />p[title =value]property1:value1;...<br/>p[title=“th”]{background-color: #603;}title属性值以“th”结尾的所有p标签

3.4 伪类和伪元素选择器

除了以上三种选择器，还可以根据元素的特殊状态来选择元素，即伪类和伪元素选择器

3.4.1 伪类选择器

伪类与类选择器相似。以（：）开始，含类型选择符时冒号前后不能出现空白。

细分语法描述：
:active[element]:active {property1:value1;…}
a:active{font-size: 20px; background-color: #FF6;color: red;}		向被激活的元素添加样式
:focus[element]:focus{property1:value1;…}
#d1 input:focus{background:#F90; outline: thick red dashed;}		向拥有键盘输入焦点的元素添加样式
:hover[element]:hover{property1:value1;…}
a:hover{font-size: 16px; background-color: #CCC;}		当鼠标悬浮于元素上方时添加样式
:linka**:link**{property1:value1;…}
a:link{
font-size: 12px;
color:back;
text-decoration: none;
}		向未被访问不的链接添加样式
:visiteda**:visited**{property1:value1;…}
a:visited{
font-size: 12px;
color:#036;
text-decoration: line-through;
}		向已被访问不的链接添加样式
:readonly[element]:readonly{property1:value1;…}
:readonly{border: solid 1px #CC0000;}		向只读元素添加样式
:checked[element]:checked{property1:value1;…}
:checked{outline: solid 2px #336633;}		向被选中的元素添加样式
:disabled[element]:disabled{property1:value1;…}
:disabled{background-color: #999; font-size: 12px;}		向被禁用的元素添加样式
:enabled[element]:enabled{property1:value1;…}
.enanbedButton:enabled{background-color: #FF9;color: #00F;}		向可用的元素添加样式
3.4.2 伪元素选择器

伪元素表示某元素的部分内容，虽然逻辑上存在，但在DOM中并无与指定应的部分

细分语法 / 示例说明
首行元素[element]::first-line{property1:value1;…}
::first-line{font-weight: bold;text-decoration: underline;}		向文本的首行添加样式
首字元素[element]::fisrt-letter{property1:value1;…}
.letterStyle::first-letter{
font-size: 40px;
border: solid 3px #666666;
}		向文本的第一个字母或汉字添加特殊样式
前缀元素[element]::before{property1:value1;…}
.inlineStyle::before{content: url(…/img/eg_arrow.gif);}		在元素之前添加内容
后缀元素[element]::after{property1:value1;…}
.letterStyle::after{content: url(…/img/eg_arrow.gif);}		在元素之后添加内容

3.5 选择器汇总

选择器类型语法 及 示例描述
基本选择器
通用选择器{property1:value1;property2:value2;…}
{font-size: 12px; color: red;}		页面中所有的元素都是用该规则
标签选择器element{property1:value1;property2:value2;…}
p{font-family: 楷体;}		页面中所有的该HTML标签都是用该规则
类选择器.classname{property1:value1;property2:value2;…}
.myClass{width: 970px; background-color: #CCCCCC;}		将不同的标签设置为相同的演示，或者相同标签使用不同的样式
ID选择器#idvalue{property1:value1;property2:value2;…}
#myId{color: red;text-decoration: line-through;}		页面中具有该ID的元素应用该规则
组合选择器
多元素选择器selector1,selector2,…{property1:value1;…}
p,div{font-size:14px ;color: blue;}		多个元素应用相同的规则
后代选择器selector1 selector2 …{property1:value1;…}
div p{background-color: #CCC;}		又称包含选择器，选取没有元素的所有后代元素应用这一规则
子选择器selector1 > selector2 >…{property1:value1;…}
div > p{font-weight: bold;border:solid 2px #066;}		选取某个元素的直接子元素应用规则
相邻兄弟选择器selector1 + selector2 + … {property1:value1;…}
h3 + p{font -weight:bold;}		选取紧接在某元素之后的兄弟元素
普通兄弟选择器selector1 ~ selector2 ~ …{property1:value1;…}
h3 ~ p{background: #CCC;}		指拥有相同父元素的元素，
元素之间不必直接紧随
属性选择器根据表元素的属性选取对应的元素
存在选择器element[attribute]{property1:value1;…}
div[ id ]{font-family: “microsoft yahei”;}		任何带有Id属性的div标签
相等选择器element[attribute=value]{property1:value1;…}
p[name=“teaName”]{font-weight: bold;}		name属性是teaName的p标签
包含选择器element[attribute~=value]{property1:value1;…}
p[name~=“stu”]{color: red;}		name属性中包含”stu"单词，
并于其他内容通过空格隔开
连接子符选择器element[attribute|=value]{property1:value1;…}
p[name =“zh”]{background-color: #999;}		lang属性是zh或者以“zh-”开头的子串所有p标签
子串选择器element[attribute*=value]{property1:value1;…}
p[title*=“zh”]{font-size: 12px;}		title属性值包含“zh“子串的所有p标签
前缀选择器element[attribute^=value]{property1:value1;…}
p[title^=“ch”]{block-size: 20px;}		title属性值以“ch”开头的所有p标签
后缀选择器element[attribute = v a l u e ] p r o p e r t y 1 : v a l u e 1 ; . . . < b r / > p [ t i t l e =value]{property1:value1;...}<br />p[title =value]property1:value1;...<br/>p[title=“th”]{background-color: #603;}title属性值以“th”结尾的所有p标签
伪类选择器
激活伪类[element]:active {property1:value1;…}
a:active{font-size: 20px; background-color: #FF6;color: red;}		向被激活的元素添加样式
焦点伪类[element]:focus{property1:value1;…}
#d1 input:focus{background:#F90; outline: thick red dashed;}		向拥有键盘输入焦点的元素添加样式
鼠标悬浮[element]:hover{property1:value1;…}
a:hover{font-size: 16px; background-color: #CCC;}		当鼠标悬浮于元素上方时添加样式
未访问链接a**:link**{property1:value1;…}
a:link{
font-size: 12px;
color:back;
text-decoration: none;
}		向未被访问不的链接添加样式
已访问链接a**:visited**{property1:value1;…}
a:visited{
font-size: 12px;
color:#036;
text-decoration: line-through;
}		向已被访问不的链接添加样式
只读伪类[element]:readonly{property1:value1;…}
:readonly{border: solid 1px #CC0000;}		向只读元素添加样式
被选中元素[element]:checked{property1:value1;…}
:checked{outline: solid 2px #336633;}		向被选中的元素添加样式
被禁用元素[element]:disabled{property1:value1;…}
:disabled{background-color: #999; font-size: 12px;}		向被禁用的元素添加样式
可用元素[element]:enabled{property1:value1;…}
.enanbedButton:enabled{background-color: #FF9;color: #00F;}		向可用的元素添加样式
伪元素选择器
首行元素[element]::first-line{property1:value1;…}
::first-line{font-weight: bold;text-decoration: underline;}		向文本的首行添加样式
首字元素[element]::fisrt-letter{property1:value1;…}
.letterStyle::first-letter{
font-size: 40px;
border: solid 3px #666666;
}		向文本的第一个字母或汉字添加特殊样式
前缀元素[element]::before{property1:value1;…}
.inlineStyle::before{content: url(…/img/eg_arrow.gif);}		在元素之前添加内容
后缀元素[element]::after{property1:value1;…}
.letterStyle::after{content: url(…/img/eg_arrow.gif);}		在元素之后添加内容

Chapter02 CSS元素属性

1. 文本属性

  • 文本的很多属性用于控制文本的格式化，文本属性列表
功 能属性名描 述
文本方向direction设置文本方向
文本颜色color设置文本颜色，取值如red、rgb(255,0,0)、#F0000
水平对齐text-align设置文本的水平对齐方式,取值left、right、center、justify
垂直对齐vertical-align设置文本的垂直对齐方式,取值bottom,middle,top,baseline
字符间距letter-spacing设置字符（汉字）之间的间隔
字间距word-spacing设置单词之间的间隔
文本缩进text-indent设置行的缩进大小,值可以为正值或负值,单位可以为em,px,%
行间距line-height设置文本的行高
字符转换text-transform设置段落中需要强调的文字，取值uppercase,lowercase,capitalize(英文单词首字母大写),
文本修饰符text-decoration设置段落中需要强调的文字,取值underline,overline,line-through,
文本溢出符text-overflow规定当前我呢本溢出时发生的事情
文本阴影text-shadow给页面添加阴影效果
空白字符white-space设置处理原文档多余的空白自动的方式，normal(忽略多余)，pre(正常显示)，nowrap(文本不换行)
  • 文本阴影
参数含义
h-shadow指定水平阴影的位置，该值允许为负值
v-shadow指定垂直阴影的位置，该值允许为负值
blur指定模糊距离
color指定阴影颜色

2. 字体属性

字体(又称字型)：是字母和符号样式的集合，虽然字体之间可能存在一定的差异，但总体特征基本相同，具有以下一些特征

特征说明特征说明
基线：字型起始线中线：小写字型达到最高点
升高：字体中最大字型的最高点下沉：小写字体达到的最低点
x高度= 小写字型的高度

字体属性如下：

字体属性具备长度单位，如：px，em等。其中font-size的属性经常取值未相对大小，如：font-size:2em。这种写法是相对于父节点的字符大小，而变成两倍的font-size

功 能属性名描 述
字体风格font-style设置字体风格，取normal,italic(倾斜),oblique(倾斜),inherit(继承自父元素)
字体系列font-family设置文本的字体，可取宋体、隶属、Microsoft Yahei以及serif,Verdana(英文,中文)
字体变形font-variant设定小型大写字母，取值small-caps
字体加粗font-weight设置100-900，其中lighter(细体对应100),bold(加粗对应900),normal(普通对应400)
行间距line-height设置文本的行高
字体大小font-size设置文本的大小,取值可以为数字、
或者xx-small、x-samll、samll、medium、large、x-large、xx-large
属性合并简写fontfont-style font-variant font-weight font-size/line-height font-family;
font:oblique small-caps xx-small 14px/20px Cambria,Microsoft Yahei;

服务器字体

CSS3新增了服务器字体功能，避免因客户端缺失字体导致页面效果变差问题

  • 服务器字体可以控制浏览器使用服务器段所包含的字体，当客户端没有装过该字体时，系统会自动下载安装，从而保证不同浏览器的效果一致性。

使用服务器字体的步骤：

  1. 下载所需的服务器字体，引用至项目下作为资源文件
  2. CSS3代码中通过@font-face来定义服务器字体
  3. CSS3代码中通过选择器设置 字体的 font-family属性，指向@font-face定义的服务器字体名称

服务器字体的支持情况

  • Firefox、Chrome、safari浏览器支持.tff(True Type Fonts)
  • IE9+ 目前仅支持.eot(Embedded OpenType)
  • IE8及其之前的版本连@font-face都不支持
@font-face {font-family: QstFont;src: url("./font/博洋楷体7000.TTF");}
/* @font-face {font-family: QstGlyphicons;
    src: url("./font/glyphicons-halflings-regular.ttf"),
            url("./font/glyphicons-halflings-regular.eot");*/
@font-face {font-family: Qstkaishu;src: url("./font/博洋行书7000.TTF");}
@font-face {font-family: QstFZkaishu;src: url("./font/方正硬笔楷书简体.TTF");}
p{font-family: QstFont;}
/* span{font-family: QstGlyphicons;} */
div p{font-family: Qstkaishu;}
div p span{font-family: QstFZkaishu;}

<body>
    <h2>4-12 导入外部字体</h2>
    普通字体－在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体<br>
    <p>博洋楷体7000－在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体</p>
    <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
    <span>
        QstGlyphicons-在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体
    </span>
    <div>
        <p>
            博洋行书7000－在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体
        </p>
    </div>
    <div>
        <p>
           <span>
               方正硬笔楷书简体-在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体
            </span>
        </p>
    </div>
</body>
</html>
## 3. 背景属性

通过背景属性可以设置元素背景，而与元素背景相关的属性包括：背景颜色、背景图片、背景定位。属性列表如下

功 能属性名描 述
背景颜色background-color设置元素背景色
背景定位background-posotion设置图像在背景中的位置。取值：
top、bottom、left、right、center 或具体值（10px）、百分比(%)
背景图像background-image设置背景图片，格式：background-image:url(bg.jpg);
没有图像,则该值为none
背景重复background-repeat设置背景平铺的方式。取值：
no-repeat(不平铺)、repeat-x(横向平铺)、repeat-y(纵向平铺)
背景关联background-attachment设置背景图片是否随页面内容一起滚动。 取值：
默认为 scroll(滚动默认)；还可取 fixed(固定)
背景尺寸background-sizeCSS3新增属性，用来设置背景图像的尺寸，可以使用图像的像素或%设定图片的尺寸。 在CSS3之前，背景图片的尺寸由图片的实际尺寸决定
填充区域background-originCSS3新增属性，规定background-position属性相对什么位置来定位。取值：border-box、padding-box、content-box
绘制区域background-clipCSS3新增属性，规定背景的绘制区域。 取值：border-box、padding-box、content-box
背景简写background可以综合设置以上属性background。
background: #FBA414 center 5% / 80% 50% repeat-y padding-box border-box scroll url(“…/img/backimg3.jpg”);

注意：

  • 在CSS3中，新增了background-size、background-origin、background-clip等属性。
  • 背景区域的绘制和填充有border-box、padding-box、content-box三种形式。
  • 背景图片位于背景颜色的上层，当同时出现背景图片和背景颜色时背景图片将覆盖背景颜色；而没有图片的地方显示颜色
  • CSS3的多背景图片在IE7中不可用，IE8中需要采用HTML5的文档头部定义<!DOCTYPE>
body{
    background: url("./game/bg5.jpg");
    background-position: 200px 150px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* 等价于： */
    background: url("./game/bg5.jpg") 200px 150px fixed no-repeat;
}

4. 表格属性

表格属性用于对表格的边框、背景颜色和单元格间距等进行设置，使表格丰富美观。

功 能属性名描 述
宽度/ 高度width/height宽/高
标题位置caption-side设置表格标题的位置,取值top,bottom
边框border设置表格边框宽度,形式,颜色
折叠边框border-collapse设置将表格边框折叠为单一边框 (separate双边框,默认;collapse 单边框) 取代rules=all
单元格间距border-spacing设置相邻单元格的边框间的距离，仅用于双边模式
内边距Padding设置表格中内容与边框的距离
内容水平对齐方式text-align设置表格单元格的内容水平对齐方式
内容垂直对齐方式vertical-align设置表格单元格内容的垂直对齐方式
表格元素内居中margin:auto将表格在父元素内设置为居中对齐
  • 注意：

border-collapse：设置表格是单边框 collapse 还是双边框seqarate(默认)

border-spacing 和 caption-side 需要在IE8+版本之上使用，且文档声明为H5

5. 列表属性

  • 列表属性用于改变列表项的图形符号。如在列表项左侧显示圆点，空心圆、方块、数字或图片
功 能属性名描 述
列表类型list-style-type设置浏览器的图形符号，取值为:
none,disc,circle,square,decimal,lower-latin,
lower-roman,lower-alpha,upper-latin
列表项图像list-style-image指定图像符号为图像，list-style-image:url(xxx.gif)
列表项图像list-style-position设置列表图项符号的位置，取值inside,outside
列表简写list-style设置顺序为type、image、position
  • 注意：

list-style-position取outside时图形符号位于文本之外，取inside时图形符号唯一文本内

6. 光标属性

cursor属性，标识鼠标的样式

<body>
    <h2>4-16 cursor属性</h2>
    <h4>4-16-1 默认属性</h4>
    <div><span style="cursor:auto;">cursor:auto;</span></div>
    <div><span style="cursor:cell;">cursor:cell;</span></div>
    <div><span style="cursor:col-resize;">cursor:col-resize;</span></div>
    <div><span style="cursor:context-menu;">cursor:context-menu;</span></div>
    <div><span style="cursor:copy;">cursor:copy;</span></div>
    <div><span style="cursor:crosshair;">cursor:crosshair;</span></div>
    <div><span style="cursor:e-resize;">cursor:e-resize;</span></div>
    <div><span style="cursor:ew-resize;">cursor:ew-resize</span></div>
    <div><span style="cursor:n-resize;">cursor:n-resize;</span></div>
    <div><span style="cursor:ne-resize;">cursor:ne-resize</span></div>
    <div><span style="cursor:s-resize;">cursor:s-resize;</span></div>
    <div><span style="cursor:w-resize;">cursor:w-resize;</span></div>
    <div><span style="cursor:col-resize;">cursor:col-resize;</span></div>
    <div><span style="cursor:row-resize;">cursor:row-resize;</span></div>
    <div><span style="cursor:move;">cursor:move;</span></div>
    <div><span style="cursor:wait;">cursor:wait;</span></div>
    <div><span style="cursor:pointer;">cursor:pointer;</span></div>
    <div><span style="cursor:text;">cursor:text;</span></div>
    <h4>4-16-2 外部属性</h4>
    <div><span class="arrow">arrow</span></div>
    <div><span class="beam">beam</span></div>
    <div><span class="cross">cross</span></div>
    <div><span class="help">help</span></div>
    <div><span class="link">link</span></div>
    <div><span class="move">move</span></div>
    <div><span class="no">no</span></div>
    <div><span class="pen">pen</span></div>
    <div><span class="pin">pin</span></div>
    <div><span class="up">up</span></div>
    <div><span class="size1">size1</span></div>
    <div><span class="size2">size2</span></div>
    <div><span class="size3">size3</span></div>
    <div><span class="size4">size4</span></div>
</body>

7. 可见性属性

属性属性值描述
displaynone 隐藏
inline 内联
block 块级		将元素设为隐藏状态
将元素显示为块级元素，此元素前后会带有换行符
默认，此元素会被显示为内联元素，元素前后没有换行符
visibility取值为
visible 显示
hidden 隐藏		visibility属性可以将页面中的元素隐藏，但是被隐藏的元素仍占原来的空间
当不希望对象在隐藏时仍然占用页面空间时，可以使用display属性
z-index取值为 正负整数属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素，
总是会处于堆叠顺序较低的元素的前面
h1{visibility: hidden;}
h2{visibility: visible;}
p{display: inline;}
span{display: block;}
div{display: none;}
img {
    position:absolute;
    left:0px; top:0px;
    z-index:-1;
}

<body>
    <h1>我是被隐藏的</h1>
    <h2>4-17CSS样式属性-可见性属性</h2>
    <h3>dispaly属性的使用效果</h3>
    <hr >
    <p>display属性规定元素应该生成的框的类型</p>
    <p>对于XML，由于XML没有内置这种层次结构<span>dispaly</span>是绝对必要的</p>
    <div>本例演示如何把元素显示为内联元素</div>
    <p>如果使用display不谨慎会很危险，因为可能违反HTML中已经定义的显示层次架构</p>
</body>

8. 定位属性

  • 定位用于设置界面上，位置刁钻的元素。常见的用法是，处理图片轮动时左右两边的箭头按钮的定位

  • 一般情况，页面是由页面流构成的，页面元素在页面流中的位置是由该元素在(X)HTML文档中的位置决定的。块级元素从上向下排列(每块单独成行)，而内联元素从左向右排列，元素在页面中的位置会随外层容器的改变而改变。

  • CSS中提供了三种定位机制：普通流、定位(position)和浮动(float)

8.1 position属性

position属性可以将元素从页面中偏移或分离出来，然后设定其具体位置，从而实现根精确的定位

类型说明
static默认，元素在页面流中正常出现，并作为页面流的一部分
relative相对定位，相对于其正常位置进行定位，并保持其定位前的形状和所占的空间
absolute绝对定位，相对于浏览器窗口进行定位，将元素框从页面流中完全删除后，重新定位，
当拖拽页面滚动条时，该元素随页面一起滚动
fixed固定定位，相对浏览器窗口进行定位，将元素框从页面流中完全删除后，重新定位，
拖拽滚动条，元素不随页面一起滚动
8.1.1 使用绝地定位的原则

采用绝对定位（absolute）的元素，会先向上查找其父元素，其否采取了相对定位（relative），如果采用就以父级的左上角为坐标点，如果没采用就接着往上找，直到body.

在实际开发中通常不会以body左上角作为坐标圆点，所以但凡一个元素设置了绝对定位，则必会在其某个较近的父级元素上设置 相对定位（relative）,这样才能为子级提供定位点

8.1.2 固定定位特点

常用于设置网站中的两侧小工具的导航栏

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4-18定位属性</title>
    <link rel="stylesheet" href="./css/4-17positionAttribute.css">
</head>
<body>
    <h2>4-18 定位属性</h2>
    <div id="container">
        CSS有三种定位方式，<stong>普通流、浮动、绝对定位</stong> 除非特别指定，否则所有的框都在普通流种点位
        <div class="staticstyle">这是静态定位</div>
        块级框从上到下逐个排列，块级框的之间的垂直距离，由框的外边距计算出来
        <div class="relativestyle">这是相对定位</div>
        可以使用水平内间距、边框和外边距调整他们的距离。但垂直内边距、边框和外边框不影响行内框的高度
        <div class="absolutestyle">这里是绝对定位</div>
        <div class="inlineStyle">
            有一行形成的水平框成为行内框（Line Box）,行内框的而高度总是只容纳所报行的所有行内框，但是设置行高可以...
        </div>
        <div class="fixedstyle">这里是固定定位
            <ul>
                <li>浮动菜单栏1</li>
                <li>浮动菜单栏2</li>
                <li>浮动菜单栏3</li>
                <li>浮动菜单栏4</li>
                <li>浮动菜单栏5</li>
            </ul>
        </div>
        <div class="div1">示例1</div>
        <div class="div2">示例2</div>
        <div class="displaynone"></div>
    </div>
</body>
</html>

样式

#container{ margin: auto;width: 500px;height: 300px;border: 1px solid #66c18c;border-radius: 20px;box-shadow: #66c18c;}

.staticstyle{ position: static;width: 460px;border: 1px dotted #12aa9c;top: 100px;}
/* 相对定位 */
.relativestyle{position: relative;left: 120px;top:-15px; border: 1px solid #1E9EB3;width: 200px;}

.inlineStyle{display: inline;background-image: url("../img/bg8.png"); border: solid 2px #666666;}
/* 绝对定位 */
.absolutestyle{position: absolute;width: 200px;height: 50px; top: 290px;left: 360px;background: #68B88E;border: 1px solid #ff0003;}
/* 固定定位 */
.fixedstyle{position: fixed;width: 150px;height: 500px;top:30px;right: 5px;background: #Fb9968;color: #FFFFFF;}

.fixedstyle ul li{font:small-caps 14px/30px Cambria,Microsoft YaHei;}

/* z-index的使用 */
.div1{position: absolute;width:100px;height:50px;top:320px;left:240px;background:#AB456B;z-index: 5;}

.div2{position: absolute;width:100px;height:50px;top:340px;left:370px; background:#AB456B;z-index: 3;}

.displaynone{height: 2000px;visibility: hidden;}

下图中：

中间的空白行本来是相对定位这块div的地方，但是使用了 relative相对定位属性值，导致其偏移至上方

8.2 float 与 clear

8.2.1 float取值范围
取值说明
left元素浮动到左侧边界
right元素浮动到右边界
none默认值，元素不浮动
8.2.2 clear取值
取值说明
left清除左侧浮动产生的影响
right清除右侧浮动产生的影响
both清除两侧浮动产生的影响
none默认值，允许浮动元素出现在两侧
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4-19 浮动属性</title>
    <style type="text/css">
        .Container img{
            float: left;
            border:  solid 1px #999999;
        }
    </style>
</head>
<body>
    <div class="Container">
        <img src="img/bg9.png" width="160px" height="120px" >
        <p>
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围....
        </p>
        <p style="clear: both;">
如果浮动非替换元素，则要指定一个明确的宽度，否则，他们会尽可能的地便窄
        </p>
    </div>
</html>

9. 伪类与伪元素属性

  • 伪类和伪元素是预先定义的、独立于文档元素的，能够被浏览器自动识别。
  • 处于特殊状态的元素称为伪类，而伪元素是指元素中特别的内容（元素的一部分）
    • 伪类以冒号（：）开始，在类型选择符与冒号之间不能出现空白，冒号之后也不能出现空白。
    • 在CSS1时引入了:link、:visited和:active三个伪类，只是用于HTML中的标签，表示网页中的链接状态：未访问、已访问和被选中，三者之间是互斥的。
    • 在CSS2中对伪类的范围进一步扩充，确保适用于页面中的所有元素，并引入新的伪类:hover、:focus等。
类名描述
:active向被激活的元素添加样式
:focus向拥有键盘输入焦点的元素添加样式
:hover当鼠标悬浮在元素上方时，向元素添加样式
:link向未被访问的链接添加样式，目前仅适用于超链接
:visited向已被访问的链接添加样式，目前仅适用于超链接
:readonly向只读元素添加样式
:checked向被选中的元素添加样式
:disabled向被禁用的元素添加样式
:enabled向可用的元素添加样式
  • 伪元素表示某元素的部分内容，虽然在逻辑上存在，但在文档树（又称DOM模型）中不存在与之对应的部分。
伪元素描述
:first-line向文本的首行添加特殊样式
:first-letter向文本的第一个字母或汉字添加特殊样式
:before在元素之前添加内容
:after在元素之后添加内容
东海若知意
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值