CSS学习

最新推荐文章于 2025-06-05 20:08:17 发布

wangying28___

最新推荐文章于 2025-06-05 20:08:17 发布

阅读量303

点赞数

分类专栏：基本代码总结文章标签： css html

本文链接：https://blog.youkuaiyun.com/baobaoxiong_123456/article/details/73556188

版权

基本代码总结专栏收录该内容

12 篇文章

订阅专栏

CSS学习

CSS基本概念

CSS（Cascading Style Sheet 层叠样式表）简称，样式。主要负责网页的美观。

CSS和HTML：
HTML:负责网页的结构；
CSS负责：负责网页的美观。

CSS的三种使用方式

行内样式

1）使用标签的style属性进行css控制，css写在style属性值中
2）弊端：只能控制一个标签的样式

<a href="xxxx" style="font-size:19px;color:#090">超链接</a>

内部样式

1）使用style的标签进行css控制，css内容写在style标签体内
2）一次控制多个标签的样式 3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css样式</title>
<style type="text/css">
    a{font-size:18px;
    color:#CC00CC;
    background-color:#66FF00;
    }
</style>
</head>
<body>
    <!--
    这里第一个链接是使用行内样式进行定义
    -->
    <a href="3.qq.html" target="_blank" style="background-color:#00006;font-size:30px; ">这是一个链接</a><br/><br/>
</body>
</html>

外部样式

1）建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件

<!-- 导入外部css文件
    href  : 表示外部css文件的位置
    rel: 表示关联的是样式表
-->
    <link href="01.css" rel="stylesheet"/>

CSS语法

内部样式

 <style type="text/css">
    a{font-size:18px;
    color:#CC00CC;
    background-color:#66FF00;
    }
</style>

1. 选择器（selector）：使用选择器来选择需要添加样式的标签。

如这里的 a

2. CSS属性（property）：给选择的标签添加什么样式。例如，字体大小，颜色，背景…..

font-size、color、background-color……

3. CSS值（value）：添加样式的具体值。12px , 红色，背景图片….

font-size:18px;
18px为属性值。

CSS选择器

标签选择器

如 body,p,a,div等；
类选择器，需要在标签中加入class属性；
如下是选择 class=a1的类，它需要在html页面中进行说明；
```
<a href="" target="_blank" class="a1">这是一个链接</a>
```

然后在style中进行选择，设置CSS样式：

.a1{
    font-size:24px;
    background-image:url(key.jpg);
    background-repeat:no-repeat;
}

id选择器
在html页面的a标签中说明id值：

<a href="" target="_blank" class="a1" id="newlink">这是一个链接</a><br/><br/>

选择id为newlink设置样式：

#newlink{
    background-color:#0000FF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:large;
}

通用选择器、并集选择器、交集选择器
通用选择器：使用 *
```
*{
    font-size:24px;
    color:#0F0;
}
```

并集选择器：使用逗号分开

 .c1,#d1{
        font-size:24px;
        color:#0F0;
    }

交集选择器：使用空格分开

.c1 span{ 
        font-size:24px;
        color:#0F0;
    }

伪类选择器
作用：控制标签在不同状态下的样式。

标签有四种状态：
        link: 没有访问过的状态
        hover: 鼠标经过的状态
        active:鼠标激活（按下但没有松开）的状态
        visited: 已经被访问过的状态（鼠标点下且松开）

在html页面中有一个链接：

    <div id="d1">
        <a href="3.qq.html" target="_blank">link</a>

在style中设置样式：

        div a:link{
            font-size:30px;
            color:#009900;
            background-color:#99CCFF;
        }
        div a:visited{
            font-size:30px;
            color:#0000FF;
        }
        div a:hover{
            font-size:30px;
            color:#FFCC99;
        }
        div a:active{
            font-size:30px;
            color:#003300;
        }

*1）在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有*
效的。

    正确顺序： link visited hover active

CSS常用属性和值

CSS文本

此图片引用w3school网站。

wschool CSS学习

CSS字体

font-family:"宋体";
font-size:24px;
font-style:italic;
font-weight:bold;
font:italic bold 36px "黑体";

CSS设置字体简写格式：

font:italic bold 36px "黑体";

CSS背景

/*背景颜色*/
            /*
            background-color:#0CF;
            */
            /*背景图片*/
            /*
            background-image:url(../05.%E7%B4%A0%E6%9D%90/mm.jpg);
            */
            /*设置背景图片是否重复，或如何重复
                not-repeat: 不重复
                repeat-x: x轴重复
                repeat-y: y轴重复
                repeat: x和y轴重复(默认)
            */
            /*
            background-repeat:no-repeat;
            */
            /*设置背景的起始位置*/
            /*
            /*需要画图详细讲解*/
            background-position:top center;
            */
            /*简写属性*/
            background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center;

CSS列表

/*列表符号类型*/
    list-style-type:none;
    /*设置列表符号的图片*/
    list-style-image:url(../05.%E7%B4%A0%E6%9D%90/start.jpg);

CSS表格

table{
 /*设置背景*/
    background-color:#99CCCC;
    border-collapse:collapse;
    border:solid;
    }

CSS边框

        /*边框颜色*/
        /*简写属性
          1) 默认设置方向属性： 上 右 下 左
          2）如果当前方向没有设置颜色，那么取对面的颜色
        */
        /*
        border-color:#F00;
        */
        /*
        border-left-color:#F00;
        border-right-color:#0F0;
        border-top-color:#00F;
        border-bottom-color:#C90;
        */

        /*边框宽度*/
        /*简写属性*/
        /*
        border-width:10px;
        */
        /*
        border-left-width:10px;
        border-right-width:20px;
        border-top-width:30px;
        border-bottom-width:40px;
        */
        /*边框样式(注意： 边框只有加了border-style才会显示出来)
        solid: 单实线
        dashed:虚线
        dotted: 点
        double: 双实线
        */

        /*简写属性*/
        /*
        border-style:solid;
        */

        /*
        border-left-style:solid;
        border-right-style:dashed;
        border-top-style:dotted;
        border-bottom-style:double;
        */

        /*所有边框属性的简写属性*/
        border:2px solid #F00;

CSS设置盒子模型

盒子相关的属性：
宽度和高度（width和height）：决定这个盒子的容量
内边距（padding）：盒子边框与内容的距离
边框（border）：盒子的厚度
外边距（margin）：盒子与盒子之间的距离

.dd2{
    width:800px;
    height:300px;

    border:10px solid #CCCCFF;
    background:#999999;

    padding:15px;
    margin:15px;
}

CSS定位

相对定位：relative（相对自己之前的位置）
绝对定位：abosolute（相对父标签的位置）
固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变)