CSS Part1

最新推荐文章于 2024-09-30 15:42:36 发布

heyunh

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量389

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/Miratowa_/article/details/124225434

版权

本文深入解析CSS的基本概念，包括嵌入式、行内式、外部样式表和导入式引入方式，详细讲解了元素、关系、属性和伪类选择器，以及常用的文本、字体、背景和列表属性实例。通过小米侧边导航栏案例，演示了CSS在实际应用中的威力。

摘要由CSDN通过智能技术生成

一、CSS简介

CSS （Cascading Style Sheets）指层叠样式表。它可以设置HTML元素的表现样式，如：背景颜色、背景图片。背景透明度、元素尺寸、元素边框、字体样式、文本样式等。

二、CSS的使用

样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。但要使用CSS样式需要引用到 .html 文件里，才可以产生效果。实现内容与样式的分离，便于团队开发；样式复用，便于网站的后期维护；页面的精确控制，让页面更精美

1.引入方式

①（页面）嵌入式

<head>
<style>
		p{
			color: red;
		}
</style>
</head>

页面嵌入式是把样式写到<style>标签里，然后把<style>标签放到 .html 文档里的<head>标签里就可以成功引用。

②（行内）嵌入式

<p style="color:red;margin-left:20px">这是一个段落。</p>

行内嵌入式是直接在标签里面加上属性style=“属性：属性值；”,上例表示给p标签里添加了--------字体颜色为红色，左侧外边距为20px 的样式。

③链接式（外部样式表）

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

这里用<link>标签引入了文件名为mystyle.css的样式表。

④导入式

<style type="text/css">
			   @import url(mystyle.css);
			   
			  /* 或
			   
			   @import "mystyle.css";
</style>
			*/

导入式和链接式一样应该写在 .html文件的<head>里。

2.样式的定义

在这里插入图片描述
样式由选择器和多条声明组成，每条声明由属性：值组成。

三、选择器的分类

1.元素选择器

①通配符选择器

    * {属性：值；}
      该选择器会选定页面上的所有元素设置样式。

②标签名选择器

   标签名 {属性：值；}
      该选择器选择一种元素设置样式。

③id选择器

   #id属性值 {属性：值；}
      该选择器选择具有相同id属性的元素设置样式。

④类选择器

   .class属性值 {属性：值；}
      该选择器选择具有相同类名的元素设置样式。

2.关系选择器

①包含选择器

   E F {属性：值；}
      选择被E包含的F元素。

②子选择器

   E>F {属性：值；}
       选择所有作为E元素的子元素F。

③相邻选择器

    E+F {属性：值；}
       选择紧贴在E元素之后F元素。

④兄弟选择器

    E~F {属性：值；}
       选择E元素后面的所有兄弟元素F。

3.属性选择器

1、E[att]：选择具有att属性的元素

2、E[att=“val”]：选择具有att属性,并且att属性值等于val的元素

3、E[att~=“val”]：选择具有att属性,并且att属性值是用空格隔开的单词,其中一个单词等于val

4、E[att^=“val”]：选择具有att属性,并且att属性值是以val开头的字符串

5、E[att$=“val”]：选择具有att属性,并且att属性值是以val结尾的字符串

6、E[att*=“val”]：选择具有att属性,并且att属性值中包含val的字符串

7、E[att|=“val”]：选择具有att属性,并且att属性值是以val开头、以’-'分隔的字符串

4.结构化的伪类选择器

1、html:root：根元素选择器。html文档中的根只有一个。样式应用于页面的每个元素

html:root{

样式属性：值;

}

2、E:not(选择器)：不包含给定选择器的元素

3、E:only-child ：匹配父元素仅有一个子元素E

4、E:first-child ：匹配父元素的第一个子元素E

5、E:last-child : 匹配父元素的最后一个子元素E

6、E:nth-child(n)：匹配父元素中第(n)个子元素E

7、E:nth-last-child(n)：匹配父元素中倒数第(n)个子元素E

8、E:nth-of-type(n)：匹配同类型中的第n个同级兄弟元素E。

9、E:empty ：匹配没有任何子元素的元素E

10、E:checked : 匹配用户界面上处于选中状态的元素E

11、E:enabled ：匹配用户界面上处于可用状态的元素E。

12、E:disabled ：匹配用户界面上处于禁用状态的元素E。

5.伪对象选择器

 1、E:before(CSS2)

   E::before(CSS3)
   
   设置在对象前（依据对象树的逻辑结构）插入的内容。必须和content属性一起使用 
   
2、E:after(CSS2)

   E::after(CSS3)
   
   设置在对象后（依据对象树的逻辑结构）插入的内容。必须和content属性一起使用

6.超链接的伪类选择器

1、E:link ：设置超链接a在未被访问前的样式。

2、E:visited ：设置超链接a在被访问后的样式

3、E:hover ：设置元素在其鼠标悬停时的样式

4、E:active ：设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

四、常用CSS属性

1.文本属性

属性	值	描述
color	red rgb(255,0,0) #FF0000	设置文本颜色
text-align	center/left/right inherit(从父元素继承 text-align 属性的值)	指定元素文本的水平对齐方式
text-decoration	none/line-through/underline/overline	向文本添加修饰
text-shadow	h-shadow v-shadow blur color 水平与垂直阴影的位置模糊的距离阴影颜色	给文本添加阴影
text-indent	16px/1em	设置文本首行缩进
line-height	length	设置行高
word-spacing	length	设置单词的间距
letter-spacing	length	设置字符间距
vertical-align	top/middle/bottom/length	设置文字垂直对齐方式
text-overflow	clip（剪切文本）、ellipsis（溢出文本用省略号显示）	设置溢出文本显示方式

案例1

<head>
<style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
        }
        h3 {color: red;}
        .center {text-align: center;}
        a {text-decoration: none;}
        i {text-shadow: 3px 3px 3px #000;}
        .em {text-indent: 2em;}
        .box2 {display:inline-block;width: 200px;height: 200px;line-height: 200px;border: 1px solid #ff0;vertical-align: top;}
        .passage {word-spacing: 10px;}
        .text {letter-spacing: 10px;}
    </style>
</head>
<body>
    <div class="box">
        <h3>标题为红色</h3>
        <p class="center">这段文字居中显示</p>
        <a href="">这个链接没有下划线</a><br>
        <i>给这段文字添加阴影</i>
        <p class="em">这个段落首行有缩进</p>
        <div class="box2">
            这段文字会垂直居中
        </div>外面的文字与盒子上檐对齐<br>
        <div class="passage">This is a passage.这个句子每个单词间距10px</div>
        <div class="text">每个字符之间有间距10px</div>

    </div>
</body>

在这里插入图片描述
案例2

<head>
<style>
        .flow {
            width: 150px;
            white-space: nowrap;
            overflow:hidden;
            text-overflow: ellipsis;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div class="flow">超出的文字会用省略号显示</div>
</body>

在这里插入图片描述
此案例展示了溢出的文字用省略号显示！
需要注意的是：要实现此功能，必须使文本强制一行显示-------white-space: nowrap;
同时还要使溢出的文本隐藏-------overflow:hidden;所以使用text-overflow: ellipsis;时，必须结合上述两个属性同时使用。

2.字体属性

属性	值	描述
font-style	normal/italic/oblique	指定字体样式（后两个都是使字体倾斜）
font-weight	normal（400）/bold(700)/(100—900)	指定字体粗细（值越大字体越粗）
font-size	length(单位px)	定义字体大小
font-family	字体名称	指定字体系列

3.背景属性

属性	描述
background-color	指定背景颜色
background-image	指定背景图片（用url(图片地址)指定）
background-position	设置背景图像的起始位置
background-repeat	设置背景图像是否及如何重复
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动值：scroll（默认滚动）、fixed（固定）、local（随元素滚动而滚动）

简写：background：bg-color bg-image position bg-repeat bg-attachment；

小米侧边导航栏案例

<head>
<style>
        a {
            text-decoration: none;
            background-color: rgb(87, 79, 79);
            color: white;
            display: block;
            width: 200px;
            height: 40px;
            text-indent: 20px;
            font-size: 18px;
            /* 要使文字垂直居中，就使行间距等于盒子高度即可  */
            line-height: 40px;
            /* font-family: "楷体"; */
        }

        a:hover {
            background-color: orange;
        }
    </style>
</head>

<body>
    <a href="">手机 电话卡</a>
    <a href="">电视 盒子</a>
    <a href="">笔记本 平板</a>
    <a href="">出行 穿戴</a>
    <a href="">智能 路由器</a>
    <a href="">健康 儿童</a>
    <a href="">耳机 音响</a>
</body>

在这里插入图片描述

此案例知识点：

对<a>标签里文字的样式、颜色、大小，文本的缩进、行高的设置；
背景颜色的使用；
链接伪类选择器设置鼠标经过链接时样式的改变；
行内元素到块级元素的转换。

4.列表属性

属性	值	描述
list-style-type	circle（空心圆）、square（方块）	设置无序列表前小圆点的形状
list-style	lower-roman（小写罗马数字i, ii, iii, iv, v, 等）、 upper-roman（大写罗马数字I, II, III, IV, V, 等）、 lower-alpha（小写字母a,b,c,d等）、 upper-alpha（大写字母A,B,C,D等）	设置有序列表前数字的类型
list-style-image	url(" ")	将图像设置为列表项标志
list-style-position	inside（列表项目标记放置在文本以内）、 outside（默认值。保持标记位于文本的左侧外面。）、 inherit（规定应该从父元素继承 list-style-position 属性的值）	设置列表中列表项标志的位置

案例1

<head>
<style>
        ul li {
            list-style-type: square;
        }
        ul li:first-child {
            list-style-type: disc;
        }
        ul .circle {
            list-style-type: circle;
        }
    </style>
</head>
<body>
    <ul>
        <li>实心圆</li>
        <li class="circle">空心圆</li>
        <li>小方块</li>
    </ul>
</body>

在这里插入图片描述
注意：
1.子选择器、类选择器、伪类选择器的使用；
2.三种列表项标志形状的设置。

案例2

<style>
        ol {
            float: left;
        }
        .lroman {
            list-style: lower-roman;
        }
        .uroman {
            list-style: upper-roman;
        }
        .la {
            list-style: lower-alpha;
        }
        .ua {
            list-style: upper-alpha;
        }
    </style>
</head>
<body>
    <ol class="lroman">
        <li>小写罗马数字</li>
        <li>小写罗马数字</li>
        <li>小写罗马数字</li>
    </ol>
    <ol class="uroman">
        <li>大写罗马数字</li>
        <li>大写罗马数字</li>
        <li>大写罗马数字</li>
    </ol>
    <ol class="la">
        <li>小写字母</li>
        <li>小写字母</li>
        <li>小写字母</li>
    </ol>
    <ol class="ua">
        <li>大写字母</li>
        <li>大写字母</li>
        <li>大写字母</li>
    </ol>
</body>