css基础总结(css简介、css语法框架、css样式表格式、css选择器)

最新推荐文章于 2024-04-19 20:33:06 发布

CrazyPixel

最新推荐文章于 2024-04-19 20:33:06 发布

阅读量491

点赞数 1

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_44201830/article/details/126632429

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css基础总结

1-css概述

css含义
cascading style sheets——层叠样式表，也称css样式表、级联样式表。
css作用
html负责网页页面中“有什么”，而css负责网页页面中的内容“长什么样”，用来定义网页内容的格式
css语法框架

/*展开格式——推荐 */
选择器 {
    属性:值;/* 每行称为一个“声明” */
    ……;
    属性:值/* 最后一个声明后不需要跟“;” */
}
/* 紧凑格式 */
选择器 {属性:值;……;属性:值}

样式表格式
css样式表的格式可以按照书写位置分为三类：行内样式表、内部样式表、外部样式表。

行内样式表
直接在元素标签中设定样式，可简单修改某些标签的样式。例如如下代码：

<p color="red" font-size="10px" >文字部分</p>

内部样式表
首先回顾一下html文件的基本框架：

<html>
    <head>
        <title>网页标题</title>
    </head>

    <body>
        <!--各类标签-->
    </body>

内部样式表即把样式表写在html代码中，将样式打包放在<style>标签中，因此，html文件的框架变为如下格式：

<html>
    <head>
        <title>网页标题</title>
        <style><!--放在head标签中，对本结构中所有标签均可选择和赋予样式-->
            选择器{声明}
            ……
            选择器{声明}
        </style>
    </head>

    <body>
        <!--各类标签-->
    </body>

外部样式表：在开发中更加常用，结构（html）和样式（css）分离，将css部分单独写成.css文件，并引入html页面中。.css文件的基础结构如下：

选择器 {
    属性:值;
    ……;
    属性:值
}
……
选择器 {
    属性:值;
    ……;
    属性:值
}

而在html文件中，需要使用<link>标签引入css样式表，操作如下：

<html>
    <head>
        <title>网页标题</title>
        <!--引入xx.css文件中的样式表-->
        <link rel="stylesheet" href="xx.css的路径">
    </head>

    <body>
        <!--各类标签-->
    </body>

2-css选择器

css选择器分类

基础选择器

标签选择器
选择一类标签，将此类标签全部应用某种格式

标签名 {
    属性:值;
    ……;
    属性:值
}

/* 在标签中 */
<h1>标题1</h1>
<h1>标题2</h1>
<p>段落文字</p>

/* 如果选择器是h1，那个就选择所有h1标签进行格式处理*/

类选择器
对于目标标签，设置class属性，即设置类名，根据类名选择若干个标签应用某种格式

.类名 {
   属性:值;
   ……;
   属性:值
}

/* 在标签中 */
<h1 class="class1">标题1</h1>
<h1 class="class2">标题2</h1>
<h1 class="class1">标题3</h1>
/* 如果选择器是.class1，选择第一个和第三个h1标签；
如果选择器是.class2，选择第二个h1标签 */

id选择器
对于目标标签，设置id属性，根据id值选择某一个标签（注意：只能选择某一个标签，因此id值不能重复）应用某种格式

#类名 {
   属性:值;
   ……;
   属性:值
}

/* 在标签中 */
<h1 id="id1">标题1</h1>
<h1 id="id1">标题2</h1>
/* 如果选择器是#id1，选择第一个h1标签；
且第二个标签这样的写法是错误的。 */

通配符选择器
选择页面中的所有标签，一般用于所有元素在格式处理前的风格统一化。

* {
   属性:值;
   ……;
   属性:值
}

/* 在标签中所有标签都会被应用某种格式 */

复合选择器
首先介绍一下标签的关系，有两种基本的关系：父子关系（包含关系）、兄弟关系(并列关系)。如下是表格标签的基础结构：

<table>
    <tr><!--第一行-->
        <th></th>
        <td></td>
        ……
        <td></td>
    </tr>
    ……
    <tr><!--第n行-->
        <th></th>
        <td></td>
        ……
        <td></td>
    </tr>
</table>

其中<table>和<tr>是父子关系，<th>和<td>是兄弟关系。下面以表格标签为例介绍复合选择器

后代选择器
选择父标签中的所有子标签

table tr {
   属性:值;
   ……;
   属性:值
}
/* table标签中的所有tr标签都会被选择 */

这里的“table”、“tr”是标签选择器，也可以使用其他基础选择器，例如如下代码：

.choosen #special{
   属性:值;
   ……;
   属性:值
}

<table class="choosen"><!--表1-->
    <tr><!--第一行-->
        <th></th>
        <td></td>
    </tr>
    ……
    <tr id="special"><!--第n行-->
        <th></th>
        <td></td>
    </tr>
</table>

<table><!--表2-->
    <tr><!--第一行-->
        <th></th>
        <td></td>
    </tr>
    ……
    <tr id="special"><!--第n行-->
        <th></th>
        <td></td>
    </tr>
</table>
<!--此时的css选择器，选择的就是表1的第n行-->

子选择器
选择父标签中最近的一级子元素。

table>tr {
   属性:值;
   ……;
   属性:值
}
/* table标签中选择第一个tr标签，即选择第一行 */

并集选择器
选择多个并列的标签进行相同样式设置

th,td {
   属性:值;
   ……;
   属性:值
}
/* table标签中的所有th、td标签都会被选择 */

伪类选择器
比较特殊的一类选择器，主要用来给某些标签添加特殊效果。

链接伪类：主要针对链接标签<a href="xx" target="-self">文本或图像</a>

a:link{声明} /* 选择所有未访问过的链接 */
a:visited{声明} /* 选择所有已访问过的链接 */
a:hover{声明} /* 选择鼠标放于之上的链接，很常用 */ 
a:active{声明} /* 选择鼠标已经点击但是尚未结束点击的链接，即被选中的链接（活动链接） */

/* 开发过程中四个链接伪类不一定都需要写出来，可以只写a:hover{} ,但是四个链接伪类都写的话，需要按照link --> visited --> hover --> active 的顺序 */

结构伪类：根据 HTML 页面中元素之间的关系来选择元素。
还是取上面的<table>标签例子。

table:nth-child(k){声明} /* 选择table标签中的第k个tr标签，即第k行,k <= 总行数 */
table:nth-last-child(k){声明} /* 选择table标签中倒数第k个tr标签，即第n-k行,k <= 总行数 */
table:first-child{声明} /* 选择table标签中的第一个tr标签，即第一行 */
table:last-child{声明} /* 选择table标签中的最后一个tr标签，即第n行 */