CSS学习笔记2

最新推荐文章于 2024-05-30 14:49:04 发布

游向大海的鱼

最新推荐文章于 2024-05-30 14:49:04 发布

阅读量116

点赞数

分类专栏： DIV+CSS

DIV+CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CS伪类选择器：给超链接加的样式

一个超链接，有四个状态：

正常状态（:link）：鼠标没有放上之前链接的样式。
放上状态（:hover）：鼠标放到链接上时的样式。
激活状态（:active）：按住鼠标左键不松的样式，这个状态特殊短暂。
访问过的状态（:visited）：按下鼠标左键，并弹起，这时的样式。

在平常工作中，会使用以下写法，来给链接加不同的样式。

a:link,a:visited{ color:#444;text-decoration:none; } //将“正常状态”和“访问过的状态”合二为一。

a:hover{ color:#990000;text-decoration:underline; } //“鼠标放上”单做一种效果。

CSS列表属性

list-style：列表样式，取值：none。去掉list前面的各种符号：

ul,ol,li{ list-style:none; }

CSS边框属性：几乎每个元素都可以加边框线。

1、border-left：左边框线。

格式：border-left:粗细线型线的颜色
线型：none（无线）、solid（实线）、dashed（虚线）、dotted（点状线）
举例：border-left:5px dashed red;

2、border-right：右边框线。

3、border-top：上边框线。

4、border-bottom：下边框线。

5、border：同时给四个边加边框线。

CSS内边距属性：边框线到内容间的距离

注意：平常我们说的width和height属性，它们指内容的宽度和高度，不含内、外边距、边框线。

padding-left：左内填充距离，左边线到内容间的距离。
padding-right:右内填充距离，右边线到内容间的距离。。
padding-top：上内填充距离。
padding-bottom：下内填充距离。
缩写形式：
- padding:10px; //四个边的内填充分别为10px
- padding:10px 20px; //上下为10px，左右为20px
- padding:5px 10px 20px; //上为5px，左右为10px，下为20px
- padding:5px 10px 15px 20px; //顺序一定是：“上、右、下、左”，顺时针方向。

提示：div、span默认无内、外边距。

CSS外边距属性

margin-left:左边线往外的距离。
margin-right:右边线往外的距离。
margin-top:上边线往外的距离。
margin-bottom:下边线往外的距离。
简写形式：
- margin:10px; //四个外边距分别为：10px
- margin:10px 20px;
- margin:5px 10px 20px;
- margin:5px 10px 15px 20px; //顺序同内边距

CSS背景属性

background-color：背景颜色
background-image：背景图片地址。如：background-image:url(images/bg.gif)
background-repeat：背景平铺方式，取值：no-repeat（不平铺）、repeat-x（水平方向）、repeat-y（垂直方向）
backtround-position：背景定位。格式：background-position：水平方向定位垂直方向定位
- 用英文单词定位：background-position:left|center|right top|center|bottom;
- 用固定值定位：background-position:50px 50px; //背景距离容器的左边50px，容器顶端50px。
- 用百分比定位：background-position:50% 50%; //水平居中，垂直居中。
- 用混合定位：background-position:left 10px; //背景靠左边齐，距离容器顶端10px。
简写方式
- background:背景色背景图是否定位定位方式；
- 举例：background:url(images/bg.gif) no-repeat center;
- 举例：background:#ccc url(images/bg.gif) no-repeat left 10px;
- 举例：background:#444 url(images/bg.gif) no-repeat rigth bottom;

CSS浮动和清除

float：让元素浮动，取值：left（左浮动）、right（右浮动）
clear：清除浮动，取值：left（清除左浮动）、right（清除右浮动）、both（同时清除上面的左浮动和右浮动）

1、CSS浮动

浮动的元素，将向上左向右浮动，浮动到包围元素的边上，或上一个浮动元素的边上为止。
浮动的元素，不再占空间了，并且，浮动元素的层级高于普通元素。
浮动的元素，一定是“块元素”，不管它原来是什么元素。
如果浮动的元素，没有指定宽度的话，浮动后它将尽可能的变窄。因此，浮动元素一般要定宽和高。
一行中的多个元素，要浮动一起浮动，

浮动的功能：可以实现将多个块元素并列排版。

如何让包围元素包装浮动元素？

需要在浮动元素的下面，使用清除浮动操作。

<style type="text/css">
.box { width=400px; background-color=#444; }
.box .div1{ width=100px; height=100px; background-color=red; float:right; }
.box .div2{ width=100px; height=100px; background-color=green; float:right; }
.box .div3{ width=100px; height=100px; background-color=blue; float:right; }

.clear { clear:both; }

</style>


<body>
<div class="box">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="clear"></div>
</div>
</body>

2、CSS清除浮动

CSS清除浮动的功能有两个：

（1）可以让包围元素从视觉上包围浮动元素。

（2）清除之下的元素将恢复默认排版。

有浮动，就得有清除。
如果包围元素指定了高度，可以不使用清除功能。

CSS继承性

CSS属性继承：外层元素的样式，会被内层元素继承。多个外层元素，最终都会“叠加”到内层元素上。
哪些CSS属性能被继承？
- CSS文本属性都会被继承：Color、font-size、font-family、font-style、font-weight、text-align、text-decoration、text-indent、letter-spacing、line-height

CSS优先级

（1）单个选择器的优先级

行内样式 > ID选择器 > class选择器 > 标签选择器

<html>
<head>
<style type="text/css">
h1{ color:read; }
.title{ color:green; }
#title{ color:blue; }
</style>
</head>

<body>
<h1 class="title" id="title" style="color:yellow">CSS优先级</h1>
</body>
</html>

（2）多个选择器的优先级

多个选择器的优先级，指向越准确，优先级越高。

针对优先级，我们可以假设如下一些值：

标签选择器优先级为1

类选择器优先级为10

ID选择器优先级为100

行内样式优先级为1000

计算以下优先级：

.news h1{ color:red; } 优先级为：10+1

.title{ color:blue; } 优先级为：10

div.news h1{ color:red; } 优先级为：1+10+1

h1.title{ color:blue; } 优先级为：1+10

display属性

功能：规则网页元素如何显示的问题
取值：none（隐藏）、block（以块元素显示）、inline（以行内元素显示）
block：可以实现将行内元素转成块元素
inline：可以实现将块元素转成行内元素

overflow属性：当内容溢出时，该如何显示

overflow：当内容溢出时，溢出的内容该如何显示。取值：visible（可见）、hidden（隐藏）、scroll（出现滚动条）、auto（自动）

cursor光标类型

cursor：网页中光标的类型，取值：text（文字）、help（帮助）、wait（等待）、pointer（手形）等等。

CSS定位

1.定位属性：position，元素定位方式，取值static、fixed、relative、absolute

static：静态定位（默认状态，不定位）
fixed：固定定位
relative：相对定位
absolute：绝对定位

2.定位方式，要与定位属性配合使用，定位坐标：指定定位的元素，偏移目标元素多远的距离。

left：定位元素距离目标的左边距离。
right定位元素距离目标的右边距离。：
top：定位元素距离目标的上边距离。
bottom：定位元素距离目标的下边距离。

3.固定定位 position:fixed

固定定位，是相对于浏览器窗口来进行的定位。
固定定位，不占空间，层级要高于普通元素。
如果不指定定位坐标的话，固定定位元素的位置在原地不动。
固定定位元素，一定是“块元素”，不管原来是什么元素。

4.相对定位 position:relative

相对定位，是相对于“原来的自己”进行的定位。
相对定位，依然占空间，层级高于普通元素。
如果不指定坐标，相对定位元素的位置在原地不动。
相对定位，保持原有行内或者块元素不变。

提示：相对定位和绝对定位，一般情况下是配合使用。

5.绝对定位，position:absolute

相对于祖先定位元素（相对定位，绝对定位），来进行的定位。
- 如果它的父元素没有进行任何定位的话，再往上找定位元素。
- 如果一直找到<body>都没有找到定位元素的话，那就相对于<body>
绝对定位，不占空间，层级要高于普通元素。
如果不指定坐标的话，绝对定位元素的位置在原地不动。
绝对定位元素，是一个“块元素”。

HTML引入CSS的方法

1.嵌入式

通过<style>标记，来引入CSS样式。
语法格式：<style type="text/css">代码</style>

提示：

<style>中的CSS样式，只能给当前网页来使用。
同一个网页中，<style>标记可以多次出现。

2.外联式

通过<link>标记，来引入一个外部的CSS文件（*.css），可以实现CSS样式给多个网页共享。

<link>标记的常用属性：

rel：引入的是什么类型的文件。取值：stylesheet
type：内容类型。
href：引入的CSS文件的路径或地址。

提示：

<link>标记放在<head>标记中。
同一个网页可以使用多个<link>来链入多个外部样式文件。
CSS文件中，代码只能是CSS属性样式，不能出现HTML标记。

3.行内样式，就是在标记中直接写样式（主要用于JS控制元素的样式）。

每一个HTML标记，都有一些公共属性，如class、id、title、style等。
HTML标记中的style属性的值，与CSS样式一模一样。

提示：

行内样式中，CSS代码不可以换行。
行内样式优先级是最高的，比ID选择器优先级还要高。

举例：<body style="background-color=red;font-size=12px;font-family=宋体;">

CSS表格属性

border-collapse：表格边框线合并，取值：collapse。

<table width="500" border="1" align="center" cellpadding="5" style="border-collapse:collapse;">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td></td>
        <td></td>
    </tr>
</table>

盒子模型

我们可以把每一个HTML标记看成是一个“盒子”。

”盒子“的特征：内容的宽度和高度、边框线、内填充、外边距。

”盒子“的总宽度 = 内容的宽度 + 边框宽度*2 + 内填充*2 + 外边距*2

游向大海的鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记2

CS伪类选择器：给超链接加的样式一个超链接，有四个状态：正常状态（:link）：鼠标没有放上之前链接的样式。放上状态（:hover）：鼠标放到链接上时的样式。激活状态（:active）：按住鼠标左键不松的样式，这个状态特殊短暂。访问过的状态（:visited）：按下鼠标左键，并弹起，这时的样式。在平常工作中，会使用以下写法，来给链接加不同的样式。a:link,a:visi...
复制链接

扫一扫

专栏目录