初识别CSS

最新推荐文章于 2024-05-29 19:01:50 发布

W295723987

最新推荐文章于 2024-05-29 19:01:50 发布

阅读量132

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/W295723987/article/details/130463809

版权

CSS样式的实现方式

1、直接写入在标签中

<h1 style="color:red">这是镖旗</h1>

2、写入在head中

<html leng='en'>
<head>
    <meta charset="UTF-8">
    <title>用户调查表</title>
    <style>
        .c1 = {
            color:red;
        }    
        .c2 = {
            height:100px;
        }
    </style>
</head>
<body>

    <h1 class='c1'>样式1</h1>
    <h1 class='c2'>样式2</h1>
</body>
</html>

3、写到文件中

.c1{
    height:100px;
    }
.c2{
    color:red;
    }

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="common.css" />
</head>
<body>
    <h1 class='c1'>样式1</h1>
    <h1 class='c2'>样式2</h1>
</body>
</html>

Flask中的应用

问题：用Flask框架开发不方便

每次都要重启
规定有些文件必须要放在特定的文件夹
新创建一个页面
- 函数
- HTML文件

可直接用Pycharm自带功能进行开发

选择器

ID选择器

#c1{    }

<div id="c1">    <div>

类选择器

.c1{    }

<div class="c1">    </div>

标签选择器

div{    }
<div>    </div>

属性选择器

input[type='text']{
                border:1px solid blue;
            }
.c3[example="123"]{
                color:pink;
            }

<input style="text"/>
<div class="c3" example="123">    </div>

后代选择器

//对class=c4下所有子集（子子孙孙）生效
.c4 a{
                color:grey;
            }
//对class=c4下第一层（儿子）生效
.c4 > a{
                color:green;
                }

<div class="c4">
    <a>例子1</a>
    <div>
        <a>例子2</a>
    </div>
</div>

关于多样式选择覆盖问题

以style中c5 c6的顺序进行覆盖，而不是class中的顺序
对于特别重要的属性，可以使用！important，此时不会被覆盖

.c5{
              color:red;
              border:1px solid red;
                }
.c6{
                font-size: 28px;
                color:green;
                }

<ul>
    <li class="c5 c6">多样式覆盖</li>
</ul>

样式

1.高度和宽度

.c1{
    height: 300px;
    width: 500px;
    }

宽度支持百分比写法，百分比是相对整个浏览器宽度而言
高度是不支持的，因为高度是未知的
对于行内标签，其不支持高度宽度更改
对于块级标签，有效，但是更改宽度后，即使不沾满整行，其空白区域也禁止其他人使用

2.块级标签和行内标签

块级标签
行内标签
兼顾块级和行内标签-> display:inline-block

.c7{
            display: inline-block;
            height: 100px;
            width: 300px;
            border:1px solid red;
            font-size: 30px;
    }

注意：块级和行内不是绝对的

<div class="inline">    具有行内标签属性的块级标签    </div>

<span class="block">    具有块级标签属性的行内标签    </div>

用的最多的就是块级+块级&行内

3.字体设置

颜色
大小
加粗
字体格式

.c1{
    color:red; //或者#000000;
    font-size: 58px;
    font-weight: 600;
    font-family: Microsoft Yahei;
    }

4.文字对齐方式

.c{
    height: 59px;
    text-align: center;    /* 水平方向居中 */
    line-height: 59px;    /* 垂直方向居中，与高度一致 */
    }

5.浮动

.c{
    float: right;    /* 或者left */
    }

浮动方式可以改变内容从右侧开始靠齐
浮动方式会改变内容的空间，即不受父辈元素影响，需要使用clear: both消除影响

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            float: left;
            width: 280px;
            height: 170px:
            border: 1px solid red;
            }
    </style>
</head>
<body>
    <div style="background-color: dodgerblue">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both;"></div>
    </div>
<body>

6.内边距

.style{
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding: 10px;                    /* 上右下左全部内边距10px */
    padding: 1px 2px 3px 4px;         /* 上右下左依次为1、2、3、4px */
    padding: 10px 20px                /* 上下为10px 左右为20px */
    }

7.外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 200px; background-color: dodgreblue">    </div>
    <div style="background-color: red; height: 100px; margin-top: 20px;">    </div>
    <div style="background-color: red; height: 100px; margin-right: 20px;">    </div>
    <div style="background-color: red; height: 100px; margin-bottom: 20px;">    </div>
    <div style="background-color: red; height: 100px; margin-left: 20px;">    </div>
</body>
</html>

总结

display: inline-block该方法虽然可以使块级标签在同一行显示，但是其会因为换行因素增加间隔
float: left可以使块级标签在同一行显示，不会有间隔问题

伪类

1.hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            font-size= 18px;
        }
        .c1:hover{
            color: green;
            font-size= 50px;
        }
    </style>
</head>
<body>
    <div class="c1">
    </div>
</body>
</html>

2.after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title<title>
    <style>
        .c11:after{
            content:"大帅哥"
        }
    </style>
</head>
<body>
    <div class="c1">
        我是
    </div>
</body>
</html>

其常用的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <emta chaset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after{
            content="";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="clearfix">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

3.position

fixed: 固定在窗口的某个位置

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta chaset="UTF-8"> 
    <title>Title</title> 
    <style> 
        .c1={ 
            position: fixed;
            
        } 
    </style> 
</head> 
<body> 
    <div class="c1"> </div>
</body> 
</html>

relative相对父辈的位置
absolute

.header .menu .app{
            position: relative;
            }
.header .menu .app .download{
            position: absolute;
            padding: 10px;
            height: 80px;
            width: 80px;
            left: -30px;
            top: 46px;
            display: none;
            background-color: #FFF;
            }

4.Border

.c1{
    border: 1px solid red;
    <!--依次为宽度 线型 颜色-->  
}

.c2{
    border1 1px solid transparent
    <!--特殊颜色-透明色,常用来占位用-->
}

5.背景色

.c1{
    background-color: red;
}

W295723987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识别CSS

display: inline-block该方法虽然可以使块级标签在同一行显示，但是其会因为换行因素增加间隔float: left可以使块级标签在同一行显示，不会有间隔问题。
复制链接

扫一扫

初识别CSS

CSS样式的实现方式

1、直接写入在标签中

2、写入在head中

3、写到文件中

Flask中的应用

问题：用Flask框架开发不方便

可直接用Pycharm自带功能进行开发

选择器

ID选择器

类选择器

标签选择器

属性选择器

后代选择器

关于多样式选择覆盖问题

样式

1.高度和宽度

2.块级 标签和行内标签

3.字体设置

4.文字对齐方式

5.浮动

6.内边距

7.外边距

总结

伪类

1.hover

2.after

3.position

4.Border

5.背景色

“相关推荐”对你有帮助么？

2.块级标签和行内标签