html4

day03[stage01]

1章节目录

1.1目标

·初识

CSS样式表

·基本选择器

·组合选择符·

 属性选择器

1.2重点

·基本选择器

· 属性选择器

·定位

1.3难点

·组合选择符

·定位

2初识CSS样式表

CSS是一种描述HTML文档样式的语言。CSS描述应该如何显示HTML元素。

 

 

 

 

2.1什么是CSS

· CSS指的是层叠样式表（Cascading Style Sheets），也称级联样式表

● CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素

● CSS节省了大量工作，它可以同时控制多张网页的布局

● 外部样式表存储在CSS文件中

 

Css还能美化html元素

Css文件夹可以存放 .css文件.

选择器{属性：属性值；}。

选择器：

3.1元素选择器

元素选择器根据元素名称来选择HTML元素。

3.2 id 选择器

id 选挥器根据元素的id属性来选择特定的HTML元素。

元素的id在页面中是唯一的，因此id选择器用于选择一个唯一的元素!要选择具有特定id的元素，请写一个并号（#），后跟该元素的id。

注意∶ id名称不能以数字开头。

3.3类选择器

类选择器选择有特定class属性的HTML元素。

如需选择拥有特定class的元素，请写一个句点（.）字符，后面跟类名。

实例

.center {text-align:center;color: red;1

解析 在这个例子中，所有带有class=“center”的HTML元素文本将为红色且居中对齐。你还可以指定只有特定的HTML元素会受类的影响。实例∶p.center {

text-align:center;color: red;

}

最好对选择器进行分组，以最大程度地缩减代码。如需对选择器进行分组，请用*逗号 来分隔每个选择器。实例∶

h1,h2,p {

text-align:center;color: red;1

解析在这个例子中，我们对上述代码中的选择器进行分组

4组合选择符

CSS组合选择符包括各种简单选择符的组合方式，说明了两个选择器之间的关系。

在CSS3中包含了四种组合方式∶·

后代选择器（以空格 分隔）· 

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

·相邻兄弟选择器（以加号+分隔）

·普通兄弟选择器（以波浪号~分隔）

4.1后代选择器

后代选择器用于选取某元素的后代元素。

4.2子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。

实例∶div>p{

background-color: red;}

| 解析|∶在这个实例中，选择器选取<div>元素中的所有直接子元素<p>。

4.3相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元紫后的元素，且二者有相同父元素。

实例∶div+p{

background-color:green;}

解析 ∶在这个实例中，选择器选取所有位于<div>元素后的第一个<p>元素。

4.4后续兄弟选择器

后续兄弟选择器选取指定元素之后的所有相邻兄弟元素。

实例∶

div-p{

hackaraund-rolor:oranoe}

解析：在这个示例中，选择器选取位与<div>元素后的所有相邻兄弟元素<p>.

5属性选择器

我们可以设置带有特定属性或属性值的HTML元素的样式。

5.1 【attribute】选择器【attribute】选择器用于选取带有指定属性的元素。实例∶a [target] {

background-color;yellow;y

解析 在这个实例中，选择器选取所有带有target 属性的<a>元素。

5.2【attribute="value"】选择器【attribute="value"】选择器用于选取带有指定属性和值的元素。实例∶

a [target="_blank"] [background-color:red;}

|/解析|在这个实例中，选择器送取所有带有target=”_blank”属性的<a>元素。

5.3设置表单样式

若需为不带class或id的表单设置样式，属性选择器会很有用∶

input[name="nickname"]{

定位

6.1 position 属性

position属性规定应用于元素的定位方法的类型。有五个不同的位置值∶

· static

· relative

· fixed

· absolute

·sticky

元素其实是使用top、bottom、left和right属性定位的。但是，除非首先设置了position属性，否则这些属性将不起作用。根据不同的position值，它们的工作方式也不同.

6.2 position: static;

HTML元素默认情况下的定位方式为static（静态）。

静态定位的元素不受top、bottom、left和right属性的影响。

position∶ static； 的元素不会以任何特殊方式定位； 它始终根据页面的正常流进行定位

。实例∶div.static {

position:static;border: 3px solid darkred;}

6.3 position:relative;

position∶ relative的元素相对于其正常位置进行定位。

设置相对定位的元素的top、right、bottom和left属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

效果

这个<div>元素设置了position∶relative；

6.4 position: fixed;

position∶fixed；的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。top、

元素选择器=标签选择器 举例： 所有p标签

id和类选择器优先级高于元素选择器

通用选择器“*”，选择页面上所有html的元素，优先级小于元素选择器。

分组选择器 举例《h1》

后代选择器优先级高于分组选择器

通用选择器的优先级最低

后续兄弟选择器包含相邻兄弟选择器，优先级高于相邻兄弟选择器