CSS入门笔记

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

桃花岛传人

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

阅读量227

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/beggar_it/article/details/69486715

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。将网站分成两个部分，表现和内容，表现由CSS来控制，内容由PHP从数据库中读取。

CSS基本语法

CSS由三部分构成
- 选择器（selector）
- 属性（property）
- 属性值（value）
CSS基本语法

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

举个栗子：

p {
color:red;
text-align:center;
}

小结
1、选择器（selector）：指明这组样式所要针对的对象。可以是xhtml标签，如body、h1；也可以是定义了特定的id或class的标签。
2、属性（property）：选择符的样式属性，如颜色、大小、定位、浮动方式等。
3、值（value）：是指属性的值。
4、同时可以为一个选择器定义多个属性，每个属性之间用分号分隔。

选择器的分类

类(class)选择器

-   必须以点开头
- 通过class属性来调用
- 类样式可以被多次调用

举个栗子：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html">
    <title>css练习</title>
    <style type="text/css">
        .f {
            color: #990000;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p class="f">山有木兮木有枝，心悦君兮知不知。</p>
    <b class="f">人生若只如初见，何事秋风悲画扇。</b>
</body>

ID选择器

- Id是唯一的编号
- 以#开头
- 通过元素的id属性来调用
- 只能被调用一次

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #foo {
            color: #00ffff;
            font-size: 18px;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p id="foo">死生契阔，
        与子成说。
        执子之手，
        与子偕老。</p>
</body>

标记选择器

直接选择HTML的标记

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html">
    <title>css练习</title>
    <style type="text/css">
        p {
            color: #dc143c;
            /*font-family:后面跟多个字体，默认使用第一个字体，如果第一个没有，就使用第二个，依次类推，如果样式中的字体客户端一个都没有，就使用客户端的默认字体，中文操作系统，默认是宋体。*/
            font-family:"黑体", "隶书", "微软雅黑";
        }

        b {
            color: #CC6600;
            text-align: center;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>两情若是久长时，又岂在朝朝暮暮。</p>
    <b>衣带渐宽终不悔，为伊消得人憔悴。</b>
</body>

关联选择器

关联选择器是指一个用空格隔开的两个或更多的单一选择器组成的字符串

<head>
    <meta charset="UTF-8">
    <title>关联选择器</title>
    <style type="text/css">
        /*p下面的b起作用*/
        p b {
            color: crimson;
            font-size: 18px;
        }

        /*b必须是p的子级*/
        /*p>b {*/
            /*color: coral;*/
            /*font-size: 18px;*/
        /*}*/

        b {
            color: cyan;
            font-size: 16px;
        }

        /*p下面的.foo*/
        p .foo {
            color: #ff0000;
        }

        /*同时具有p和.foo的元素*/
        p.foo {
            color: #006600;
        }
    </style>
</head>
<body>
<!-- p下面的b起作用 -->
<p><b>有美人兮，见之不忘，一日不见兮，思之如狂。</b></p>
<b>十年生死两茫茫，不思量，自难忘，千里孤坟，无处话凄凉。</b>

<!-- 同时具有p和.foo的元素 -->
<p class="foo">今夕何夕，见此良人。-佚名《诗经唐风绸缪》</p>

<!-- p下面的.foo -->
<p>
    <b class="foo">在天愿作比翼鸟，在地愿为连理枝。-白居易《长恨歌》</b>
</p>
</body>

小结
- p .foo 表示p下面的.foo(p的后代)
- p>.foo 表示p的子级中的.foo
- p.foo 同时具备p和.aa的元素。
- -

组合选择器

多个样式使用相同的属性，用组合选择器,每个选择器之间都用逗号隔开。
可以将任意多个选择器组合在一起。

    <style type="text/css">
        /*多个样式使用相同的属性*/
        h1,h2,h3,h4,h5,h6 {
            color: crimson;
        }

        p,b {
            color: #006600;
        }
    </style>

伪类选择器

类可以被多个元素访问，有一个状态，超链接有4个状态。
- :link 正常连接时候的状态
- :visited 已经点击过的状态
- :hover 当鼠标移上去时候的状态
- :active 当鼠标点击下去的状态

代码说明：

<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        /*正常连接时候状态*/
        a:link {
            color: #006600;
            font-size: 14px;
        }

        /*点击后的状态*/
        a:visited {
            color: #990000;
            font-size: 14px;
        }

        /*当鼠标移上去的时候*/
        a:hover {
            color: crimson;
            font-size: 14px;
        }

        /*点击下去的状态*/
        a:active {
            color: #CC6600;
            font-size: 14px;
        }


        /*可以忽略某些状态*/
        p:hover {
            color: red;
        }

    </style>
</head>
<body>
<a href="#">山有木兮木有枝</a>
<!-- 当鼠标移上去的时候显示为红色 -->
<p>心有君兮知不知</p>
</body>

思考：如果在一个页面上，一部分的超链接是一种样式，另一部分超链接是另一种样式，如何实现？

使用伪类选择器和类选择器的组合。

<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        /*正常连接时候状态*/
        a.aa:link {
            color: #006600;
            font-size: 14px;
        }

        /*当鼠标移上去的时候*/
        a.aa:hover {
            color: crimson;
            font-size: 14px;
        }


        /*正常连接时候状态*/
        a.bb:link {
            color: red;
            font-size: 14px;
        }

        /*当鼠标移上去的时候*/
        a.bb:hover {
            color: green;
            font-size: 14px;
        }
    </style>
</head>
<body>
<a class="aa" href="#">山有木兮木有枝</a>
<a class="bb" href="#">心有君兮知不知</a>
</body>