初识别CSS

最新推荐文章于 2024-11-08 16:59:14 发布
最新推荐文章于 2024-11-08 16:59:14 发布
阅读量177 收藏
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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
关注
手把手教你基于HTML、CSS搭建我的相册（上）
官方推荐
03-20 1万+
通过有趣的demo来带你掌握前端基础
SpringBoot学习笔记（一）——初识别SpringBoot与框架整合
Harrison的学习博客
06-21 662
官网：https://spring.io/projects/spring-bootSpringBoot功能：SpringBoot是现在最主流的开发框架，它提供了一站式的开发体验，大幅度提高了我们的开发效率。在SSM阶段，当我们需要搭建一个基于Spring全家桶的Web应用程序时，我们不得不做大量的依赖导入和框架整合相关的Bean定义，光是整合框架就花费了我们大量的时间，但是实际上我们发现，整合框架其实基本都是一些固定流程，我们每创建一个新的Web应用程序，基本都会使用同样的方式去整合框架，我们完全可以将一些
初识别javascript
weixin_51666715的博客
12-20 835
Javascript javascript 是一门弱类型的编程语言。简称js。由美国网景公司发布。微软发布的类似JavaScript的语言叫JScript。 前端的编程语言只有JavaScript，后端的编程语言有java,php,c++,c,c#,go,python等。 如果说html是一个网页的框架,那么css就是对网页的装饰,是网页更加漂亮,而网页更加漂亮，则js则是用来给网页添加动作和行为。 javascript运行环境 JavaScript的运行环境有两种： 1.浏览器 2.服务器(nodejs)
CSS笔记
qq_62377928的博客
06-01 1606
基础css 进阶 移动端和响应式布局
CSS面试题
daisy
10-22 542
BFC是什么块级格式化上下文。形成一块独立的渲染区域，避免内部元素影响到外部形成BFC的条件浮动元素，float除了none以外的值决定定位元素display以下值之一,table-cell,,flexoverflow除了visible以外的值body根标签BFC的特性bfc的区域不会跟float的元素区域重叠计算bfc高度时，浮动元素也参与计算实现一个BFC这是最开始的样子
CSS Hack的概念
a11979的博客
01-11 936
一.什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack! 二.CSS hack的原理 由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先
css 兼容性书写记录
09-25
早期，开发者常用CSS hack来解决这些兼容性问题，CSS hack是一种利用CSS解析差异的特殊写法，目的是让特定浏览器识别并执行特定的CSS代码，而不影响其他浏览器。但是，这种方法虽然能快速解决问题，却增加了维护难度...
初识CSS
Silence_Rui_的博客
11-28 166
初识CSS 网页三层结构 结构层：html 样式层：css 行为层：js 什么是css？ HTML： HyperText Markup Language 层叠样式表：Cascading Style Sheet 层叠样式表 css作用：美化标签、布局 写css的三个地方 外部引入（引入到head标签中）-----用link引入-----工作中常用 内部引入-----在head中创建style标签...
初识 css
xinwenhuayu的博客
02-01 143
一、简介 层叠样式表，css可以用来为网页创建样式表，通过样式表可以对网页进行装饰，所谓层叠就是可以将网页想象成一层一层的结构，层次高的将会覆盖层次低的，而css就可以分别为网页的各个层次设置样式。 二、样式 1. 内联样式 将样式直接写到style属性中，内联样式只对当前元素的内容起作用 (1) 示例 <!DOCTYPE html> <html> <...
mtg-font：Magic The Gathering的标志性字体和CSS工具包
02-05
MTG，即魔法风云会，是一款非常受欢迎的集换式卡牌游戏，拥有独特的视觉风格和丰富的背景故事，其标志性的字体是其品牌识别的重要组成部分。 **字体介绍** MTG的标志性字体在`mtg-font` 中被精心复刻，它包含了...
2024 CSS保姆级教程二 - BFC详解
qq_37779333的博客
11-04 823
先看下MDN上关于BFC的定义：​​块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。​​具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。​通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。​。
CSS例子: 横向排列的格子
11-01 453
【代码】CSS例子: 横向排列的格子。
Vue 自定义icon组件封装SVG图标
gaowxx的博客
11-04 410
通过自定义子组件CustomIcon.vue使用SVG图标，相比iconfont下载文件重新替换更节省时间
CSS:基础选择器,文字控制属性(HTML)
m0_75035023的博客
11-04 358
CSS:基础选择器,文字控制属性(HTML),javaweb
什么是CSS 选择器？都有哪些？
Front end development engineer
11-04 458
CSS 选择器是前端开发中不可或缺的工具。通过深入理解和灵活使用各种选择器，你可以精确地选择和样式化 HTML 元素，创建出美观、交互性强的网页。记住，选择器的优先级和特异性也非常重要，需要根据实际情况进行选择和调整。
CSS实现图片3D立体效果
最新发布
Jinuss的博客
11-08 458
CSS实现图片3D立体效果
CSS画icon图标系列（一）
weixin_65450681的博客
11-05 424
CSS是一种强大且灵活的样式语言，可以通过控制样式的各种属性来实现对网页的精确控制，使网页更具有吸引力和可读性。所以我们可以利用CSS来做我们的一些icon图标，灵活运用CSS中旋转，拉伸，扭曲裁剪，伪元素选择器，实现icon小图标。
CSS的三个重点
低代码布道师的博客
11-04 493
CSS 盒模型是指每个 HTML 元素在页面上被视为一个矩形盒子。这个盒子由多个部分组成，包括内容区、内边距（padding）、边框（border）和外边距（margin）。
js实现漂亮的注册页面（js动态注册页面）
yyyyyyysc的博客
11-04 515
js实现漂亮的注册页面（js动态页面）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值