CSS学习总结

最新推荐文章于 2021-04-27 15:07:50 发布

冯东昆

最新推荐文章于 2021-04-27 15:07:50 发布

阅读量1.4k

点赞数

分类专栏：课堂笔记文章标签： css html scroll border class stylesheet

本文链接：https://blog.csdn.net/fengdongkun/article/details/7976410

版权

课堂笔记专栏收录该内容

67 篇文章 0 订阅

订阅专栏

CSS

F CSS的基本概念

• 掌握样式表的语法规则

• 样式表的分类：

– 行内样式表

– 内嵌样式表

– 外部样式表

• 掌握常用的样式

指定显示样式

F CSS基础

@ CSS是Cascading Style Sheet的缩写，翻译为“层叠样式表”，简称“样式表”。

@ 样式表的首要目的是为网页上的元素精确定位。其次，把网页上的内容结构和格式控制相分离。即html的标签主要是定义网页的内容，而CSS决定这些网页内容如何显示。

@ 优点：简化网页的格式代码，加快网页下载显示的速度，也减少了需要上传的代码数量，大大减轻了重复劳动的工作量。

F 使用CSS

@ CSS通过“样式”来表示网页的颜色、字体、背景色、边框线及网页内容的位置及大小尺寸等属性。

@ 一系列的样式组成了“样式表”。

@ CSS的语法结构：

选择符{样式属性:取值;样式属性:取值;样式属性:取值;…}

CSS的基本语法

样式和样式表

1．样式

样式是由成对的属性名和属性值以冒号“：”相间组成。

2．样式表

一系列的“样式”以分号“；”相间组成为“样式表”。

根据样式代码的位置，分为三类：

q 行内样式

q 内嵌样式

q 外部样式

q 行内样式：HTML标签直接使用style属性，称为行内样式（Inline Style）。它适用于只需要简单地将一些样式应用于某个独立的元素的情况。

例如：<table style="color:red;margin-left:200px">

…

</table>

注意：在使用行内样式的过程中，建议同学们在<head>标签中添加<meta>标签，添加的<meta>标签如下：

<head>

</head>
内联的样式比其他方法更加灵活。要使用内联样式，必须使用Content-Style-Type HTTP页眉扩展对整个文档进行单独的样式表语言声明。使用内联CSS的网页制作者必须将text/css作为Content-Style-Type HTTP页眉.

@ 内嵌样式表：是在<head>标签内添加<style></style>标签对，在标签对内定义需要的样式。

例如，<head>

td{font-size:9pt;color:red}

.font105{font-size:10.5pt;color:blue}

</style>

</head>

注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示

内嵌样式-2 选择器

选择器分为：

• HTML 选择器

• CLASS 类选择器

• ID 选择器

• 样式选择器

• HTML标签选择器：在HTML页面中使用的标签，如果在CSS中被定义，那么此网页的所有该标签都将按照CSS中定义的样式显示。

• 类选择器：使用HTML标签的class属性引入CSS中定义的样式规则的名字，称为类选择器，class属性指定的样式名字必须是以“.”开头。

• ID选择器：ID属性是用来定义某一特定的HTML元素，与class属性刚好相反，class属性是用来定义一组功能或格式相同的HTML元素。ID选择器定义的CSS名称必须以“#”开头，

• 通用选择器：是所有选择器中最强大却最少使用的。通用选择器的作用就像是通配符，它匹配所有可用元素。

伪类选择器：是指对同一HTML元素的各种状态和其所包括的部分内容的一种定义方式。

Id的优先级高于class

外部样式

@ 外联样式表:是将<style>标签内的样式语句定义在扩展名为.css的文件中。通过使用<link>标签引入样式文件。

例如，<head>
<link href="mystyle.css" rel="stylesheet" type=“text/css”>
</head>

优点：一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。

使用LINK（链接）标签，语法：

<HEAD>

</HEAD>

可以连接多个html应用到html里面

行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常

需要混合使用：

• 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css

• 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式

• 某张网页内，部分内容”与众不同“，采用行内样式

对于某个HTML标签：

1）如果有多种样式，如果规定的样式没有冲突，则叠加；

2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；

CSS中的注释

样式规则的注释
样式规则是使用/*需要注释的内容*/进行注释的。即在需要注释的内容前使用“/*”标记开始注释，在内容的结尾使用“*/”结束。注释可以多行内容注释。其注释范围在“/*”与“*/”之间

常用的样式属性

• 1．文字

• 2．背景

• 3．边框线

• 4．高度和宽度

• 5．间距和边距

• 6．列表

• 7．位置和布局

指定“对象”来定义样式表的语法规则如下：

对象1, 对象2 …… { 样式表 }

下级对象

用于某一种元素中的下级元素，定义时两元素名之间用空格相间。

P em{color:blue;}

所以元素对象

*｛color：blue;

CSS文字与文本

设置字体——font-family

设置字号——font-size

设置字体样式——font-style

设置字体加粗——font-weight

设置字体变体——font-variant

组合设置字体属性——font

文本的精细排版

调整字符间距——letter-spacing

调整单词间距——word-spacing

添加文字修饰——text-decoration

设置文本排列方式——text-align

设置段落缩进——text-indent

调整行高——line-height

转换英文大小写——text-transform

颜色和背景

设置颜色——color

设置背景颜色——background-color

插入背景图片——background-image

插入背景附件——background-attachment

设置重复背景图片——background-repeat

设置背景图片位置——background-position

设置文本排列方式——text-align

• 语法说明

该语法中的4个属性值可以任意选择其中一个。其中，left代表左对齐方式；right代表右对齐方式；center代表居中对齐方式；justify代表两端对齐方式。

转换英文大小写——text-transform

插入背景图片——background-image

基本语法

background-image:url|none

URL指定要插入的背景图片路径或名称，路径可以为绝对路径也可以为相对路径。第6章有绝对路径和相对路径的详细内容讲解。图片的格式一般以GIF、JPG和PNG格式为主。

Ø none是一个默认值，表示没有背景图片

插入背景附件——background-attachment

基本语法

background-attachment:scroll|fixed

Ø scroll表示背景图片是随着滚动条的移动而移动。是浏览器的默认值。

Ø fixed表示背景图片固定在页面上不动，不随着滚动条的移动而移动。

设置重复背景图片——background-repeat

基本语法

background-repeat:repeat|repeat-x|repeat-y|no-repeat

设置背景图片位置——background-position

• 基本语法

background-position：百分比|长度|关键字

利用百分比和长度设置图片位置时，都要指定两个值，并且这两个值要用空格隔开。一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是页面的上边。

Ø 关键字在水平方向的主要有left、center、right，表示居左、居中和居右。关键字在垂直方向的主要有top、center、bottom，表示顶端、居中和底端。其中水平方向和垂直方向的关键字可相互搭配使用。

Ø使用百分比和关键字对比说明background-position属性的属性值。

边框和边距

设计边框样式——border-style

调整边框宽度——border-width

设置边框颜色——border-color

设置边框属性——border

边距——margin-top /margin-bottom /margin-left/ margin-right/margin

填充——padding-top／padding- bottom /padding-left / padding- right /padding

设计边框样式——border-style

基本语法

border-style:样式取值

border-top-style:样式取值

border-bottom-style:样式取值

border-left-style:样式取值

border-right-style:样式取值

边框样式属性中border-style是一个复合属性，其他4个都是单个边框的样式属性，只能取一个值，而复合属性border-style可以同时取一到4个值。下面分别说明border-style属性的4个取值方法：

— 取一个值：四条边框均使用这一个值。e:s

— 取两个值：上下边框使用第一个值，左右边框使用第二个值，两个值一定要用空格隔开。

— 取三个值：上边框使用第一个值，左右边框使用第二个值，下边框使用第三个值，取值之间要用空格隔开。

— 取4个值：四条边框按照上、右、下、左的顺序来调用取值。取值之间也要用空格隔开。

调整边框宽度——border-width

基本语法

border-width:关键字|长度

border-top-width:关键字|长度

border-bottom-width:关键字|长度

border-right-width:关键字|长度

border-left-width:关键字|长度

边框宽度属性基本语法中的关键字说明

Ø 长度包括长度值和长度单位，不可以使用负数。长度单位可以使用绝对单位也可使用相对单位，如px、pt、cm等。

Ø 基本语法中边框宽度属性border-width是一个复合属性，可以同时设置四条边框的宽度。具体使用方法和边框样式的复合属性border-style是一样的，可以参照上一节关于border-style的讲解

设置边框颜色——border-color

基本语法

border-color:颜色关键字|RGB值

border-top-color:颜色关键字|RGB值

border-bottom-color:颜色关键字|RGB值

border-left-color:颜色关键字|RGB值

border-right-color: 颜色关键字|RGB值

颜色关键字可使用常用的16个关键字

Ø RGB值使用十六进制的RGB值和RGB函数值都行。

Ø 在使用边框颜色复合属性border-color时，如果只设置1种颜色，则四条边框的颜色一样；设置2种颜色，则边框的上下为一个颜色，左右为另一个颜色；设置3种颜色，边框的颜色顺序为上、左右、下；设置4中颜色，边框的颜色顺序为上、右、下、左。

设置边框属性——border

基本语法

border:<边框宽度>||<边框样式>||<边框颜色>

border-top: <上边框宽度>||<上边框样式>||<上边框颜色>

border-right: <右边框宽度>||<右边框样式>||<右边框颜色>

border-bottom: <下边框宽度>||<下边框样式>||<下边框颜色>

border-left: <左边框宽度>||<左边框样式>||<左边框颜色>

基本语法中每一个属性都是一个复合属性，都可以同时设置边框的宽度、样式和颜色属性。但是在用该语法定义边框属性时，每个属性间必须用空格隔开。

Ø 这五个属性语法中，只有border可以同时设置四条边框的属性。其他的只能设置单边框的属性。

边距——margin-top /margin-bottom /margin-left/ margin-right/margin

• 基本语法

margin-top:长度|百分比|auto

margin-bottom: 长度|百分比|auto

margin-left: 长度|百分比|auto

margin: 长度|百分比|auto

长度包括长度值和长度单位，长度单位可以使用前面多次提到的绝对单位或相对单位。

Ø 百分比是相对于上级元素宽度的百分比，允许使用负数。

Ø auto为自动提取边距值，是默认值。

Ø margin复合属性和其他复合属性的设置方法是一样的，也可以取1到4个值来同时设置边框周围的四个边距。

填充——padding-top／padding- bottom /padding-left / padding- right /padding

基本语法

padding-top:长度|百分比

padding-bottom: 长度|百分比

padding-left: 长度|百分比

padding-right: 长度|百分比

padding: 长度|百分比

长度包括长度值和长度单位。

Ø 百分比是相对于上级元素宽度的百分比，不允许使用负数。

Ø 填充复合属性padding的取值方法，可以参照边框样式border-style的取值方法。

列表

设计列表样式——list-style-type

添加列表图像——list-style-image

调整列表位置——list-style-position

设计列表样式——list-style-type

基本语法

list-style-type:<属性值>

添加列表图像——list-style-image

基本语法

list-style-image:none|URL

none表示不使用图像符号。

Ø URL指定图像的名称或者路径。

调整列表位置——list-style-position

基本语法

list-style-position:outside|inside

outside表示列表符号不向内缩进，是列表的默认属性值。

Ø inside表示列表符号向内缩进

定位

定位方式——position

设置位置——top、bottom、right、left

浮动——float

清除——clear

定位方式——position

基本语法

position:static|absolute|relative

static表示为静态定位，是默认设置。

Ø absolute表示绝对定位，与下一节的位置属性top、bottom、right、left等结合使用可实现对元素的绝对定位。

Ø relative表示相对定位，对象不可层叠，但也要依据top、bottom、right、left等属性来设置元素的具体偏移位置

设置位置——top、bottom、right、left

• 基本语法

top:auto|长度值|百分比

bottom: auto|长度值|百分比

left: auto|长度值|百分比

right: auto|长度值|百分比

浮动——float

基本语法

float:left|right|none

Ø left表示浮动元素在左边，是居左对齐的。

Ø right表示浮动元素在右边，是居右对齐的。

Ø none表示不浮动，是默认值

清除——clear

基本语法

clear:left|right|both|none

清除——clear

语法说明

Ø left表示不允许在某元素的左边有浮动元素。

Ø right表示不允许在某元素的右边有浮动元素。

Ø both表示在某元素左右两边都不允许有浮动元素。

Ø none表示在某元素左右两边都允许有浮动元素

层的应用

图层的创建——<div>

创建嵌套图层

层的属性设置

图层的创建——<div>

基本语法

<body>

</body>

在进行层的定义时，需要将层的样式同时定义，否则在网页中不会显示出来。

创建嵌套图层

基本语法

<body>

</body>

图层的嵌套只要插入多个成对的<div></div>，设置好的层的样式属性就可以完成层的嵌套。

层的属性设置

•

• 图层定义常见属性

层的属性设置

基本语法

<body>

</body>

position属性将对象从文档流中拖出，进行绝对定位；

Ø left、top属性进行左边距和顶端间距的设置；

Ø width、height属性进行宽度和高度设置；

Ø 层叠通过z-index属性定义。

CSS层

设置层空间——z-index

设置层裁切——clip

设置层大小—度来—width、height

设置层溢出——overflow

设置层可见——visibility

设置层空间——z-index

基本语法

z-index:auto|数字

auto表示子层会按照父层的属性显示。

Ø 数字必须是无单位的整数或负数，但一般情况下都取正整数，所以z-index属性值为1的层位于最下层。

设置层裁切——clip

基本语法

clip:rect{<上>|<右>|<下>|<左>} |auto

auto表示不裁切。

Ø Ø rect的4个坐标值表示所裁切矩形的4个顶点位置，其中以网页左上角为坐标（0，0），而上、右、下、左这4个坐标值则是以左上角为参照点计算的。而且任意一个坐标值都可由auto来代替，表示该边不裁切。

设置层大小—width、height

• 基本语法

• width:auto|长度

• height:auto|长度

• width表示的是宽度，而height表示的是高度。

• Ø auto表示自动设置长度。

• Ø 长度包括长度值和单位。

• Ø 长度也可使用相对值中的百分比。

• 对于每个层在设置层大小时，其中只能设置宽度和高度中的一个值，另一个值则自动获得。如果两个值都设置了，则还要同时设置层溢出属性overflow。

设置层溢出——overflow

基本语法

overflow: visible/hidden/scroll/auto

visible：扩大层的容纳范围，将所有内容都显示出来。

Ø hidden：隐藏超出范围的内容（超出范围的内容将被裁切掉）。

Ø scroll：表示一直显示滚动条。

Ø auto：当层内容超出了层的容纳范围时，则显示滚动条。

设置层可见——visibility

基本语法

• visibility:visible|hidden|inherit

visible表示该层是可见的。

Ø Ø hidden表示该层被隐藏，是不可见的。

Ø inherit表示子层或子元素会继承父层或父元素的可见性，父级元素可见则子级元素也可见。

鼠标指针——cursor

基本语法

cursor:auto|关键字|URL（图像地址）

auto表示根据对象元素的内容自动选择鼠标指针形状。

Ø URL（图像地址）表示选取自定义的图像作为鼠标指针的形状。

Ø 关键字共有16种，是系统预先定义好的鼠标指针形状，具体说明和形状见表20-2

伪类

• 伪类是一种特殊的类选择符，用来指定链接或者与其相关的选择符的状态；能被支持CSS的浏览器自动所识别的特殊选择符，

• 伪类与选择符间用冒号相连，在CSS中，伪类对文本或图像处于链接状态的修饰，故选择符大部分下是a标记，本章主要对a标记做实例讲解，其中伪类有四种常用形式是本章要讲解的，内容如下：

• “:link”用在为访问的链接上

• “:hover”用于鼠标光标置于其上的链接

• “:active”用于获得焦点（如“被单击”）的链接上

• “:visited”用在已经访问过的链接上

• 盒子在标准流中的定位原则

• 实验1——行内元素之间的水平margin

span.left{

margin-right:30px;

background-color:#a9d6ff;

}

span.right{

margin-left:40px;

background-color:#eeb0b0;

}

• 盒子在标准流中的定位原则

– 实验2——块级元素之间的竖直margin

<body>

</body>

CSS+Div 应用实例布局

• 流体浮动布局

• 固定浮动布局

• 固定定位布局

冯东昆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录