css的应用

最新推荐文章于 2024-05-12 21:28:34 发布

小鸡不简单

最新推荐文章于 2024-05-12 21:28:34 发布

阅读量409

点赞数

分类专栏： python 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_50097745/article/details/127723462

版权

python 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、初入css

行内式：直接在div中加入样式

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

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

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <style type="text/css">
        h3{
        color:red;
        }
    </style>
</head>

外链式：将css代码单独写在.css中，在<head>标签中使用<link>标签引入该文件到页面,可重用性高

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

二、css选择器

标签选择器：根据标签去

h1{
  color: blue;
}

2.类选择器：以.开头，点后有类名

<style type="text/css">
         .blue{color:blue}
</style>
 <div class="blue">这是一个div</div>

3.层级选择器：根据层级关系去找css样式 div p{} 或者div .span{}

div p {color:red
}
.con span{color:red}
<div>
    <p>
        hello
    </p>
</div>
<div class="con">
    <span>哈哈</span>
</div>

层级表达式的嵌套
div .span{
    color:blue
}

4.id选择器：其实和类选择器差不多，但是id是唯一的，只能被使用一次

  #box1{
    color: red;
  }
 <div id="box1"> 美女 </div>

5.组选择器：多个选择器之间共有的放在一起，然后往下增加新的内容

.box1,.box2,.bo3{width:100px,height:100px}
.box1{background}

6.伪类选择器：可以给选择器添加特殊效果，类选择器：伪类名字{}

div{
width: 100px;height: 100px;
}
div:hover{
color:red
width: 200px;height: 200px;
}
<div> haha </div>

三、css布局常用样式属性

width

height
background
background:url("result@2.png") no-repeat;设置背景图片
border:设置边框，border:1px solid black 一像素的实体黑色边框

border-top：边框顶部，border-top：10px solid red

border-left

border-right

border-bottorn

padding:设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;

margin：设置元素和外界的距离，外边框

float：元素浮动，可以让块元素排列在一行。可以往左浮动，也可以右浮动
div>div*2在div中创建两个子div