css概述、选择器以及样式属性

最新推荐文章于 2024-06-22 19:05:40 发布

*南汐*

最新推荐文章于 2024-06-22 19:05:40 发布

阅读量85

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_52217105/article/details/125405158

版权

1、css的定义和作用

定义：css指的是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言，是描述标记语言页面格式的标准。CSS使开发人员能够分离内容和可视元素，以实现更好的页面控制和灵活性。描述了如何在屏幕、纸张或其他媒体上显示html元素，节约了大量的工作，它可以同时控制多张网页的布局。

作用：节约时间、容易维护、页面加载速度快、html的高级样式

2、语法规则

选择器{

声明块

}

选择器：通过选择器可以选中页面的制定元素

声明块：通过声明块来制定要为元素设置样式

代码如下：

<head>

<style>

p{

font-size: 10px;

color: blueviolet;

}

</style>

</head>

3、css引入的方式

行内样式
内部样式
外部样式

4、css选择器

基础选择器：元素选择器、Id选择器、Class选择器、通配符选择器
复合选择器：后代选择器和父代选择器

元素选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
    <style>
        元素选择器 */
        p{
            font-size: 10px;
            color: blueviolet;
        }
    </style>
</head>
<body>
    <p>儿童相见不相识</p>
</body>
</html>

id选择器：

<style>
        /* id选择器  #==id id值不能重复*/
         #red{
            font-size: 20px;
            color: brown;
        }
    </style>
</head>
<body> 
    <p id="red" class="yellow abc">少小离家老大回</p>
</body>

class选择器：

<style>       
        /* 类选择器  .==class     id选择器只能选择其中一个元素   类选折器可以同时选这多个元素
        当元素有多个class属性，通过空格分隔
        当多个选择器同时作用于同一个元素时，最后出现的样式会覆盖之前的样式 */
        .yellow{
            font-size: 20px;
            color: cadetblue;
        }

        .abc{
            color: red;
        }       
    </style>
</head>
<body> 
    <p class="yellow">乡音无改鬓毛衰</p>
</body>

通配符选择器：

<style>
        /* 通配选择器 */
        *{
            font-size: 20px;
            color: pink;
        }
    </style>
</head>
<body>
    <h1>回乡偶书</h1>
    <p id="red" class="yellow abc">少小离家老大回</p>
    <p class="yellow">乡音无改鬓毛衰</p>
    <p>儿童相见不相识</p>
</body>

5、css样式属性

常用字体属性：font-family :指定字体类型 font- size：指定文本的字体大小；font-style：指定文本的字体样式； font-weight：指定文本的字体粗细； font:在一个声明中设置所有的字体属性
图标字体：字体图标展示的是图标,本质属于字体。主要用于显示网页中通用、常用的一些小图标。字体图标的优势：一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求。字体图标本质是文字,可以随意的改变颜色、产生阴影、透明效果、旋转等。
常用文本属性：color:设置文本颜色； text-align:对齐元素中的文本；text-decoration:向文本添加修饰；line-height:设置行高
其他常用样式：width:元素的宽度； height:元素的高度； background:背景颜色； opacity:元素透明度； overflow：指定如果内容溢出一个元素的框。

6、制作百度首页的案例，代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下，你就知道</title>
</head>
<style>
    .a{
        text-align:center;
    }
    .b{
        text-align:center;
        color: blue;
    }
    .c{
        text-align:center;
    }
    .d{
        text-align:center;
        font-size: 10px;
         width: 100%;
        height: 60px;
        position: fixed;
         bottom: 0;
    }
    .e{
        text-align:center;
        font-size: 10px;
        opacity: 0.5;
        position: absolute;
        bottom: 0;
        width: 100%;
    }
</style>
<body>
    <div class="a">
        <img src="../Baidu/bdlogo.gif">
    </div>
    <div class="b">
        <a href="https://www.baidu.com/">新闻</a>
        <a href="https://www.baidu.com/">网页</a>
        <a href="https://www.baidu.com/">贴吧</a>
        <a href="https://www.baidu.com/">知道</a>
        <a href="https://www.baidu.com/">音乐</a>
        <a href="https://www.baidu.com/">图片</a>
        <a href="https://www.baidu.com/">视频</a>
        <a href="https://www.4399.com/">地图</a>
    </div>
    <br>
    <div class="c">
        <input type="text" name="text1" size="50" maxlength="40">
        <input type="submit" name="提交" value="百度一下"><br>
    </div>
    <br><br><br>
    <div class="b">
        <a href="https://www.baidu.com/">百科</a>
        <a href="https://www.baidu.com/">文库</a>
        <a href="https://www.baidu.com/">hao123</a>
        <span>|</span>
        <a href="https://www.baidu.com/">更多>></a>
    </div>
    <br><br><br> <br><br><br>
    <div class="d">
        <a href="https://www.baidu.com/">把百度设为主页</a>
        <a href="https://www.baidu.com/">安装百度浏览器</a> 
        <br>
        <a href="https://www.baidu.com/">加入百度推广</a>
        <span>|</span>
        <a href="https://www.baidu.com/">搜索风云榜</a>
        <span>|</span>
        <a href="https://www.baidu.com/">关于百度</a>
        <span>|</span>
        <a href="https://www.baidu.com/">About Baidu</a>
    </div>
    <div class="e">
            <p>2013 Bai du 使用百度前必读 京ICP证030173号</p>
    </div>
</body>
</html>

注意：这里面插入的图片链接的路径可以使用绝对路径，也可以使用相对路径。