CSS入门基础

最新推荐文章于 2024-11-06 22:50:26 发布

原创最新推荐文章于 2024-11-06 22:50:26 发布 · 330 阅读

CC 4.0 BY-SA版权

一、选择器详解（下）：符合选择器部分

◆标签指定式选择器（交集选择器）

◇语法： 标签名(其他选择器) {属性：值；}

◇示例：

<p class="content">段落文字1</p>

<p>段落文字2</p>

<style type="text/css">

p.content {

color:red;

}

</style>

效果：段落文字1显示红色

结论：标签指定式选择器中的两个选择器是既~又的关系，如示例中，既是p标签，又必须class属性为content的元素被选中。

◆后代选择器

◇语法： 选择器1 选择器2 ··· 选择器n {属性：值；}

◇示例：

<div>

<p>段落中的段落文字</p>

<a href="#">超链接</a>

</div>

<style type="text/css">

div a {

color:red;

}

</style>

效果：div标签中的a标签颜色变成红色。

结论：■后代选择器必须是用在嵌套关系的标签上。

■后代选择器只能获得子元素并且是获得所有的后代子元素。

◆并集选择器

◇语法： 选择器1，选择器2，···，选择器n {属性：值；}

◇示例：

<p>段落文字1</p>

<a href="#" class="content">超链接</a>

<style class="text/css">

p,a {

color:red;

}

</style>

效果：p标签和a标签中的文字都变成红色

结论：并集选择器必须由，号隔开，选择的结果是所有符合条件的元素。

◆子代选择器（了解）

◇语法： 选择器>选择器 {属性：值；}

◇特点：标签必须嵌套，子代选择器只能选择直接后代。

◆属性选择器（了解）

◇语法： 选择器[属性="值"] {属性：值；}

二、HTML标签按显4示方式分类

◆块级元素

◇h1~h6、div、p、ul···等

◇特点：

■块级元素的宽度默认是父级元素的宽度。

■块级元素高度默认由其内容的大小决定，但是可以直接设置其高度。

■块级元素是独占行显示的。

◆行内元素

◇span、a、b、s···等

◇特点：

■行内元素是非独占行显示的。

■行内元素宽和高默认由其内容决定，本质上没有宽度。

■不能给行内元素设置宽和高。

◆行内块元素

◇img、input

◇特点：

■非独占行显示。

■可以设置宽和高。

◆div标签元素

■div是一个无语义的标签，是一个块级元素。相当于一个容器，可以放任何的HTML元素。

■示例：

<div>div_1中的文字</div>

<div>div_2中的文字</div>

<style type="text/css">

div {

color:red;

width：200px;

height:100px;

background-color:green;

text-align:center;

}

</style>

□text-align属性：文字对齐方式。该属性可以在块级元素（行内块）中定义。

◆span标签元素

■span是一个无语义的标签，是一个行内元素。相当于一个容器，可以放任何的HTML元素

■示例：

<span>

行内元素span标签

</span>

<style type="text/css">

span {

background-color:red;

font:700 18px/24px "宋体";

}

</style>

◆元素模式转换

◇display属性：显示方式

◇取值范围：block(块级元素) / inline-block（行内块元素） / inline（行内元素）

◇示例:

<span class="content">行内元素文字1</span>

<span class="content">行内元素文字2</span>

<style type="text/css">

.content {

display:block;

width:80px;

height:80px;

}

</style>

效果：span标签可显示成块级元素，并且独占行显示。

结论：display可以将任何的元素进行转换，但通常情况下，在需要给行内元素设置宽和高时才需要转换。并不是所有的元素都需要进行转换。

三、CSS特性

◆层叠性

◇同一个标签中使用多个样式，如果样式发生冲突，最后定义的样式会覆盖之前的样式。

◇示例：

<p class="content1 content2">

段落文字

</p>

<style type="text/css">

.content1 {

color:red;

font-size:20px;

}

.content2 {

color:green;

}

</style>

效果：段落文字显示绿色，20px。

◆继承性

◇在嵌套关系的标签中，子元素在默认情况下，会受到父元素的样式影响。

◇注意：宽度和高度不能继承。（块级元素的宽度与父级元素相同不属于继承性）

◇可以继承的属性：

■与文字相关的属性，例如color、font属性、行高line-hight等

■如果子元素有默认的样式，则不会继承父元素样式，比如：

<p style="color:red"><a href="#">超链接</a></p>

此时，超链接文字不会显示成红色。

□继承的特殊标签：

a标签的文字颜色不受父元素影响

标题标签(h1~h6)不受父元素的文字大小影响。

◆优先级

◇样式定义后给元素渲染的权重不同。

标签选择器 < 类选择器 < ID选择器 < 行内样式 < ! Important

◇继承的样式权重为0

四、伪类

◆CSS伪类是用来添加一些选择器的特殊效果。

◆语法： 选择器:伪类名 {属性：值；}

◆常见的伪类：

◇a:link：a标签的默认样式

◇a:visited：a标签访问过后的样式

◇a:hover：鼠标划过

◇input：focus ： 输入框获得光标

五、背景（background）

◆给标签元素添加背景，包括颜色、图片等信息

◇background-color： 背景颜色

◇background-img: url(图片路径) 背景图片

◇background-repeat： 背景图片平铺方式

■repeat/no-repeat/repeat-x/repeat-y

◇background-position： 背景图片位置

■具体方位名称：

left / right / top / bottom / center

■具体数值

水平位置（x） 垂直位置（y）

◇background-attachment 背景图片滚动方式

■ scroll / fixed

◇background属性联写

background：背景颜色 背景图片 平铺方式 滚动方式 背景图片位置

示例：

background：url(bg.png) no-repeat left;