python学习笔记-前端基础-css

CSS（Cascading Style Sheet）

层叠样式表，它是用来美化页面的一种语言

CSS选择器

css选择器是用来选择标签的，选出来以后给标签加样式

css选择器的种类
* 标签选择器
* 类选择器
* 层级选择器（后代选择器）
* id选择器
* 组选择器
* 伪类选择器

标签选择器、类选择器、层级选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>

    <style>
        p {
            color: red;
        }
        .lei {
            color: blue;
        }
        .sed {
            background-color: burlywood;
        }
        div div{
            color: coral;
        }
        
    </style>
</head>

<body>
    <!-- 标签选择器 -->
    <p>hello world</p>
    <p>i am liven</p>

    <!-- 类选择器：定义class类名，并且以”.类名“的方式选择标签，给标签添加样式 -->
    <p class="lei"> 类选择器</p>
    <p class="sed">类选择器，样式可以叠加</p>

    <!-- 层级选择器 -->
    <!-- 层级选择器要有层级关系，根据层级关系获取子标签，给子标签添加样式 --> 
    <!-- 层级选择器不一定必须是父子关系，祖孙的子标签也可以找到，完成添加样式的操作 -->
    <div>
        <div>哈哈哈</div>
    </div>
    <div>哈哈哈</div>
</body>

id 选择器

id 选择器：根据id选择标签，以#开头，元素的id名称不能重复，
所以id选择器只能对应于页面上一个元素，不能复用。id名一般给程序使用，
所以不推荐使用id作为选择器

<style>
   #box{
     color: red;
   }
</style>

<p id='box'>这是一个段落标签 </p>
<p>这是第二个段落标签</p>
<p>这是第三个段落标签</p>

组选择器

根据组合的选择器选择不同的标签，以，分割开，如果有公共的样式设置，可以使用组选择器

<style>
    .box1,.box2,.box3 {width: 100px;height: 50px;}
    .box1 {color: yellow;}
    .box2 {color: red;}
    .box3 {color: green;}
</style>

<body>
   <!-- 组选择器 -->
   <!-- 组选择器，可以给一些有共同样式的标签统一定义样式 -->
   <div class="box1">这是第一个</div>
   <div class="box2">这是第二个</div>
   <div class="box3">这是第三个</div>
</body>

伪类选择器

伪类选择器就是给其他选择器``添加特殊的效果，表现形式：选择器后面加上冒号再跟上伪类的名字

<style>
div {
     width: 100px;
     height: 100px;
     background-color: yellow;
}
div:hover {
    width: 200px;
    height: 200px;
    background-color: red;
}
</style>

<div>
  哈哈哈
</div>

CSS属性

布局常用样式属性

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>

    <style>
        .box {
            width: 100px;
            height: 100px;
            /* 设置背景图片，不重复显示图片，拉伸当前显示这个图片 */
            background: url(imgs/logo.png) no-repeat;
            /* 设置标签的边框 */
            /* border: 5px solid red; */
            border-top: 5px solid red;
            /* 设置浮动,只能设置左浮动和右浮动 */
            /* 一般是设置两个div在同一行显示的时候才设置浮动 */
            float: right;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background: yellow;
        }
        .box2 {
            width: 50px;
            height: 50px;
            background: blue;
            float: left;
        }
        .box3 {
            width: 50px;
            height: 50px;
            background: green;
            float: left;
        }
    </style>
</head>

<body>
    <!-- 布局常用控件是div -->
    <di class="box">哈哈哈</di>

    <!-- div>div*2 创建一个父div在父div里面创建两个子div -->
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

文本常用样式属性

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>

    <style>
        p {
            /* 文字颜色 */
            color: red;
            /* 文字大小 */
            font-size: 30px;
            /* 文字加粗 */ 
            font-weight: bold;
            /* 文字字体 */
            font-family: "Microsoft Yahei";
            /* 背景色 */
            background: grey;

            /* 划线只能出现一条 */
            /* 添加下划线 */
            /* text-decoration: underline; */
            /* 添加中间划线 */
            /* text-decoration: line-through; */
            /* 取消划线 */
            /* text-decoration: none; */
            /* 顶部划线 */
            text-decoration: overline;

            /* 设置行高，可以设置文字垂直方向居中 */
            line-height: 100px;
            /* 设置文字水平对齐方式 */
            text-align: center;
            /* 设置文本缩进 */
            text-indent: 30px;
        }
        span {
            color: blue;
        }
    </style>
</head>

<body>
    <!-- span标签可以给文本中一小段内容设置样式  -->
     <p>我是会变色的<span>大力</span></p>
</body>

CSS元素溢出

当子元素（标签）的尺寸超过父元素的尺寸时，此时需要设置父元素显示溢出子元素的方式，设置的方法是通过overflow属性来完成的
overflow的设置项：
visible： 默认值，显示子标签溢出的部分
hidden：隐藏子标签溢出的部分
auto：如果子标签溢出，则可以滚动查看其余的内容

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>

    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background: red;
            /* 设置元素溢出需要再父标签选择器上进行设置 */
            overflow: auto;
        }
        .box2 {
            width: 200px;
            height: 50px;
            background: blue;
        }
    </style>

</head>


<body>
   <div class="box1">
       <div class="box2">123456</div>
   </div>
</body>

CSS 显示特性

display 属性是用来设置元素的类型及隐藏的，常用的属性有：
none：元素隐藏并且不占位置
inline：元素以行内元素显示
block：元素以块元素显示(与div类似，自己独占一行)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>

    <style>
        .box1 {
            background: red;
            /* 把该标签隐藏并且不占用位置 */
            /* display: none; */
            
        }
        .box2 {
            background: yellow;
            /* 设置div可以和其他元素在一行显示，就不能设置宽高 */
            /* 以后既设置div的宽高也要在同一行显示，可以通过浮动来完成 */
            display: inline;
        }
        a {
            /* 设置标签自己独占一行，不和其他标签在一行显示 */
            display: block;
        }
    </style>

</head>

 
<body>
    <div class="box1">第一个</div>
    <div class="box2">第二个</div>
    <a href="www.baidu.com">百度</a>
    <a href="www.baidu.com">百度</a>

</body>

CSS盒子模式

所谓的盒子模式就是把HTML页面的元素看做一个矩形盒子，矩形盒子是有内容（content）、内边距（padding）、边框（border）、外边距（margin）四部分组成

盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

CSS的三种引入方式

（1）行内式

直接在标签的style属性中添加css样式

<div style="width:100px;height:100px;background:red">helloworld</div>

优点：方便、直观
缺点：缺乏可重用性

（2）内嵌式（内部样式）

在<head>标签内加入<style>标签，在<style>标签中编写css代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>

    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>

</head>


优点：在同一个页面内部便于复用和维护
缺点：在多个页面之间的可重用性不高

（3）外链式

将css代码写在一个单独的.css文件中，在<head>标签中使用<link>标签直接引入该文件到页面中

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>

    <link rel="stylesheet" type="text/css" href="css/main.css">

</head>


优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。
缺点：css代码由于分离到单独的css文件，容易出现css过于集中，若维护不当则极容易造成混乱
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。