python学习笔记(CSS)

最新推荐文章于 2024-07-26 11:59:52 发布

mkgdjing

最新推荐文章于 2024-07-26 11:59:52 发布

阅读量285

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/mkgdjing/article/details/87641344

版权

这篇博客探讨了CSS（层叠样式表）的作用，包括提高工作效率的原因和其语法规则。内容涵盖CSS的选择器优先级、各种选择器范例、背景属性，并通过实例展示了如何应用CSS进行页面设计，如水平导航栏、登录界面和模拟唯品会的注册及登录界面的样式设定。

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

为什么用CSS

• CSS 指层叠样式表 (Cascading Style Sheets);
• 样式定义如何显示 HTML 元素;
• 样式通常存储在样式表中;
• 外部样式表可以极大提高工作效率;
提高效率
• 外部样式表通常存储在 CSS 文件中;

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
在这里插入图片描述

CSS语法规则

• 值的不同写法和单位;(eg:设置颜色)
• 如果值为若干单词,则要给值加引号;
• 多重声明,需要用分号将每个声明分开

CSS样式优先级

• 浏览器缺省设置
• 外部样式表
• 内部样式表(位于标签内部)
• 内联样式(在 HTML 元素内部)

选择器范例

• h1 { … } 标签选择器
• h1 i { … } 标签选择器
• #my { … } id选择器(唯一)
• #my p { … } id选择器
• .my { … } 类选择器(可不唯一)
• p .my { … } 类选择器
• .my p { … } 类选择器
• [title] { … } 属性选择器
• [title=westos] { … } 属性选择器
• [title~=hello] { … } • input[type=“text”] { … }

css背景

• 背景色:
background
• 背景图像: background-image
• 背景重复: background-repeat
• 背景定位: background-position
• 背景关联: background-attachment

main.css

h1{
    color: red;
    font-size: 24px;
}

<!DOCTYPE html>
<html lang="en">
<head>


    <!--
    ** 设置样式表的三种分类:
        1). 行内氧样式表;
        2). 内部样式表;
        3). 外部样式表;

    -->
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式表-->
    <!--<style>-->
        <!--h1{-->
            <!--color: red;-->
            <!--font-size: 24px;-->
            <!--}-->

    <!--</style>-->

    <!--<!-外部样式表&ndash;&gt;-->
    <link  rel="stylesheet"  href="css/main.css">
</head>
<body>


<!--内联样式表-->
<!--<h1 style="color: red; font-size: 24px">CSS样式</h1>-->
<h1 style="color: green">CSS样式表</h1>

</body>
</html>

案例——水平导航栏加css样式

nav.css

ul {
    list-style-type: none;
    text-align: center
}
ul li {
    display: inline-block;
    width: 20%;
    height: 30px;
    background: green;
    padding-top: 15px;
    font-size: 18px;
    /*text-decoration: none;*/
}

ul li a {
    text-decoration: none;
    color: white;
}
/*鼠标经过时产生的变化*/
li:hover {
    background: #4CAF50;
    font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/nav.css">
</head>
<body>

<!--
行内元素: 占多少用多少
块级元素: 一个标签占一整行
-->
<ul>
    <li><a href="http://www.baidu.com">博客</a></li>
    <li><a href="#