11.03 CSS的基础应用

来源：互联网发布：英国贵族知乎编辑：程序博客网时间：2024/06/05 16:19

1.1 CSS加载的方式

1.引入外部文件

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

HTML文档中使用<link>元素引入外部样式文件，引入外部样式文件应在<head>元素中增加<link>子元素。

2.导入外部样式单

<style type="text/css">@import "../outer.css";@import url('outer.css');</style>

导入外部样式表单需要在<style>元素中执行@import进行导入。

3.使用内部CSS样式
一般来说我们不建议使用内部CSS样式：
- 复用性小。
- 导致HTML文档过大，会导致网络负载严重。
- 修改整站风格时，需要对每个网页文件进行样式修改。

<style type="text/css">样式单文件定义</style>

4.使用内联CSS样式
内联样式只对单个标签有效，不会影响整个文件。
在HTML元素中使用style属性定义内联样式。

<div style="property1:value1;property2:value2;"/>

内联样式的优先级高于内部样式。

1.2 DIV和SPAN标签简介

1.内联元素和区块元素
区块元素
- 总是在新的一行上显示。
- 高度、行高、宽度、内边距、外边距等都是可控制的。
- 高度默认为0，是根据元素内的内容而决定的，宽度是父元素的宽度，但是可以通过css控制它，显示的指定他的宽度和高度，可以利用浮动和定位来将他与其他的块元素也显示在一行上。
- 实例: <h1>, <p>, <ul>, <table>。

内联元素
内联元素和其他的元素显示在一行上。
上下边距、高度，宽度都是不可改变的，他的宽度是根据他的显示文本和图像的宽度。
实例: <b>, <td>, <a>, <img>。

2.<div>元素

HTML <div>元素是块级元素，它可用于组合其他HTML元素的容器。
<div>元素没有特定的含义。由于它属于块级元素，浏览器会在其前后显示换行。
如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。

3. <span>元素

HTML 元素是内联元素，可用作文本的容器
<span>元素也没有特定的含义。
当与 CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。

1.3 选择器

1.通配符选择器
使用”*”表示通配符，用来选择页面所有元素的样式。

*{ margin:0;padding:0;}

2.类选择器
类选择器指定的样式对指定class属性的元素起作用。使用“.”标识一个类选择符，类名可以任意。

.myclass{...}

3.ID选择器
ID选择器中的样式会对具有指定id属性的HTML元素起作用。
HTML元素以id属性来设置id选择器,CSS中id选择器以”#”来定义。

需要注意的是id在HTML文档中具有唯一性，是不可以重复的。

#idValue{ ...}

4.包含选择器
包涵选择器用于指定处于某个选择器对应的内部元素。

h1 em {color:red;}

5.子选择器
子选择器要求目标选择器必须作为外部选择器对应的元素的直接子元素。

parent>child{width: 200px; height: 35px;}

<style></style><div class="a"><p>A smooth, mild <span class="b">blend of coffees</span> from Mexico, </p><div>A smooth, <p>mild</p>mild</div></div>

6.群组选择器
群组选择器使用逗号对选择符进行分隔。

我们可以将逗号读成“和”。

h1,p,myClass,#main{font-size:20px;}

1.4 伪类

CSS伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如， :hover 将在用户悬停在选择器指定的元素上时应用样式。

1.anchor伪类
链接的不同状态都可以以不同的方式显示。

<style>a:link {color:#000000;} /* 未访问链接*/a:visited {color:#00FF00;} /* 已访问链接 */a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */a:active {color:#0000FF;} /* 鼠标点击时 */</style><body><p><b><a href="/css/" target="_blank">这是一个链接</a></b></p><p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p><p><b>注意：</b> a:active 必须在 a:hover 之后。</p></body>

注意：在CSS定义中，a:hover必须被置于a:link和a:visited之后，a:active必须被置于a:hover之后，才是有效的。伪类的名称不区分大小写。

2.first-child伪类
:first-child CSS 伪类代表了一组兄弟元素中的第一个元素。被匹配的元素需要具有一个父级元素。（判断该元素是否为其父元素的第一个子元素）

element:first-child { style properties }

3.first-line伪类
“first-line” 伪元素用于向文本的首行设置特殊样式。

注意：”first-line” 伪元素只能用于块级元素。

4.:before伪类
“:before” 伪元素可以在元素的内容前面插入新内容。

1.5 CSS颜色

1. 十六进制颜色值
所有主要浏览器都支持十六进制颜色值。
指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。

2.RGB颜色值
RGB颜色值在所有主要浏览器都支持。
RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。

3.RGBA颜色值
RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。
RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。
RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

1.6 背景图片

1.背景颜色
background-color 属性定义了元素的背景颜色。
页面的背景颜色使用在body的选择器中。

2.背景图片
background-image 属性描述了元素的背景图像。
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

background:url(img_flwr.gif);

3.背景平铺重复设置
background-repeat属性控制背景图像的平铺重复效果。

4.背景图片固定
在默认情况下，组件里的背景图片会随着滚动条的滚动而自动滚动，我们要把backgrounattachment的属性设为fixed,那么背景图片就会被固定在该组件中，不会随滚动条的滚动而移动。

body{background-attachment: fixed;}

5.背景图片的定位
可以利用 background-position 属性改变图像在背景中的位置。

6.背景图片大小
background-size属性指定背景图片大小。

7.背景的简写属性
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”:
当使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position
以上属性无需全部使用，你可以按照页面的实际需要使用.

1.7 文本

1.文本的颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 - 如:＃FF0000。
- 一个RGB值-如:RGB(255,0,0)。
- 颜色的名称 - 如:red。

2.文本的水平对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为”justify”，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

<style>p {text-align: justify;}</style><body><p>Be careful to perform the actions in the correct sequence.</p></body>

3.文本修饰
text-decoration属性一般用于删除链接的下划线。

4.文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

5.文本缩进
text-indent属性控制首行文本的缩进。
属性值可以是固定值（包括负数），也可是百分比。

6.字符间距和字间距

letter-spacing属性控制字符的间距。属性值可以是正负数。
word-spacing属性控制字间距。

7.行间距
line-height属性控制行间距（简称行高）。

8.元素的垂直对齐方式
vertical-align属性控制元素垂直对齐方式。
vertical-align被用于垂直对齐inline元素，也就是display值为inline和inline-block的元素。

1.8 CSS列表

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

1.使用不同的列表项标记
使用list-style-type改变列表项标记。

2.使用图片作为列表项
使用list-style-image可以用图片作为列表的标记项。

作业

<html>    <head>        <title>coding coffee</title>        <meta charset="UTF-8">        <style type="text/css">            h1{                text-align:center;            }            .b{                /*border:2px solid red;*/                width:800;                margin:0 auto;            }            .c{                float:left;            }            .d{                float:right;                width:50%;            }        </style>    </head>    <body>            <h1>Coding Coffee Mennu</h1>        <hr>        <div class="b">            <div class="c">                <img src="../咖啡图片/c2.jpg">            </div>            <div class="d">                <h2><i>蓝山咖啡</i></h2>                <p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p>            </div>            <div style="clear:both"></div>        </div>        <hr>        <div class="b">            <div class="c">                <img src="../咖啡图片/c3.jpg">            </div>            <div class="d">                <h2><i>拿铁咖啡</i></h2>                <p>作为在中国上市的第一款单一产地系列咖啡，东帝汶塔塔迈劳咖啡豆将当地的风味浓缩其中，一起来星巴克门店，感受它那平衡的草本风味吧。</p>            </div>            <div style="clear:both"></div>        </div>        <hr>        <div class="b">            <div class="c">                <img src="../咖啡图片/c5.jpg">            </div>            <div class="d">                <h2><i>意式浓缩</i></h2>                <p>每一款臻选咖啡豆，都有着自己的个性和故事。它因人因地因天气而有着别样的风味。当你来到星巴克臻选门店，这场相遇才刚开始。和我们的黑围裙大师一起，用不同煮制方式，走进原产地的风情中。</p>            </div>            <div style="clear:both"></div>        </div>        <hr>        <div class="b">            <div class="c">                <img src="../咖啡图片/c7.jpg">            </div>            <div class="d">                <h2><i>卡布奇诺</i></h2>                <p>A smooth, lild blend of coffees from Mexico. Bolivia and Guatemala.</p>            </div>            <div style="clear:both"></div>        </div>        <hr>        <div class="b">            <div class="c">                <img src="../咖啡图片/c8.jpg">            </div>            <div class="d">                <h2><i>摩卡咖啡</i></h2>                <p>A smooth, lild blend of coffees from Mexico. Bolivia and Guatemala.</p>            </div>            <div style="clear:both"></div>        </div>        </hr>    </body><html>

阅读全文

0 0