CSS基础

最新推荐文章于 2024-10-01 23:20:42 发布

hao120929655

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量67

点赞数

分类专栏： 2022前端开发学习笔记

本文链接：https://blog.csdn.net/hao120929655/article/details/126899346

版权

css 前端

2022前端开发学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

引导语

这里我们要想一下怎么让网页变得好看，比如盒子变好看，盒子排列有序。但前提是我们能选中盒子，才能给盒子一定的样式和布局。

一、选中盒子

1.CSS选择器

1.1 标签选择器

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <!-- 可以先将CSS样式写在这里<style></style>标签里 -->
    <!-- 
        1.标签选择器
        格式：标签 {
            属性: 值;
        }
     -->
    <style>
        body {
            background-color: skyblue;
        }

        h1 {
            text-align: center;

        }

        p {
            text-indent: 2em;
            color: #fff;
        }
    </style>

</head>

<body>
    <h1>hello,world!</h1>
    <p>这是一个最好的时代，也是一个最坏的时代；这是智慧的时代，这是愚昧的时代；这是信任的纪元，这是怀疑的纪元；这是光明的季节，这是黑暗的季节；这是希望的春日，这是失望的冬日；我们面前应有尽有，我们面前一无所有；我们都将直上天堂，我们都将直下地狱。
    </p>
</body>
</html>

1.2 id选择器

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <!-- 可以先将CSS样式写在这里<style></style>标签里 -->
    <!-- 
        2.id选择器
        格式：#id名 {
            属性: 值;
        }
        注：
            1.id名不能重复,具有唯一性,一个盒子只能有一个id名,不同盒子id名不同。
            2.区分类选择器。
     -->
    <style>
        body {
            background-color: #F3F4F5;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 10px auto;
            line-height: 200px;
            text-align: center;
            color: #fff;
        }

        #hotpink {
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div>我是div,我是天蓝色</div>
    <div id="hotpink">我是div,可我不是天蓝色</div>
</body>

</html>

1.3 类选择器

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <!-- 可以先将CSS样式写在这里<style></style>标签里 -->
    <!-- 
        3.类选择器
        格式：.类名 {
            属性: 值;
        }
        注：
            1.一个盒子可以用多个类名，不同盒子类名可以相同。
            2.区分id选择器。
     -->
    <style>
        body {
            background-color: #F3F4F5;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 10px auto;
            line-height: 200px;
            text-align: center;
            color: #fff;
        }


        .radius {
            border-radius: 100px;
        }

        .orange {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="radius orange">我是圆角div1</div>
    <div>我是普通div</div>
    <div class="radius orange">我是圆角div2</div>
</body>

</html>

1.4 通配符选择器

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <!-- 可以先将CSS样式写在这里<style></style>标签里 -->
    <!-- 
        4.通配符选择器
        格式：* {
            属性: 值;
        }
        
     -->
    <style>
        /* 选中所有盒子，内外边距设置为0 */
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    hello,world.
</body>

</html>

1.5 并集选择器

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <!-- 可以先将CSS样式写在这里<style></style>标签里 -->
    <!-- 
        5.并集选择器
        格式：选择器1,选择器2 {
            属性: 值;
        }
        
     -->
    <style>
        div,
        p {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div></div>
    <p></p>
</body>
</html>

1.6 交集选择器

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交集选择器</title>
    <!-- 可以先将CSS样式写在这里<style></style>标签里 -->
    <!-- 
        6.交集选择器
        格式1：元素选择器.类选择器 {
            属性: 值;
        }
        格式2：元素选择器#id选择器 {
            属性: 值;
        }
        注：
            1.第一个必须是元素选择器，第二个是类选择器或者id选择器，中间是直接连接。
     -->
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 5px;
            color: #fff;
        }

        div.red {
            background-color: red;
        }

        div#green {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="red">我是红色div</div>
    <div id="green">我是绿色div</div>
    <div>我是大众div</div>
</body>

</html>

1.7后代选择器

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <!-- 可以先将CSS样式写在这里<style></style>标签里 -->
    <!-- 
        6.后代选择器
        格式：选择器1 选择器2 选择器3 ... {
            属性: 值;
        }
     -->
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 5px;
            color: #fff;
        }

        div .red {
            height: 50px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li class="red">div->ul->li-1</li>
            <li>div->ul->li-2</li>
            <li class="red">div->ul->li-3</li>
        </ul>
    </div>
    <div class="red">div2</div>
    <div class="red">div3</div>
</body>

</html>

二、盒子变好看

1.盒子样式

1.1 传统盒子模型

盒子模型包含四部分：content，padding，border，margin。

传统盒子box-sizing: content-box的宽度和高度是指盒子的内容区，padding和border会撑大盒子，

CSS3可以通过设置box-sizing: border-box，width和height就包含了边框，padding和border就不会撑大盒子。

1.2 盒子边框

border: 1px solid red;

2.文字样式

文字颜色	color
文字字体	font-family
文字大小	font-size
文字行高	line-height
文字是否加粗	font-weight
文字是否倾斜	font-style
文本水平对齐	text-align
文本装饰	text-decoration
文本缩进	text-indent

3.图片样式

盒子模型，img属于行内块元素
给图片加浮动，文字环绕图片效果
给图片加超链接、对齐

4.超链接样式

a {
  color:#333;
  text-decoration: none;
}
a:hover {
  color: #fff;
}

5.列表样式

ul,ol {
  list-style: none;
}

6.表格样式

基本没用到。

7.表单样式

盒子处理

8.背景样式

背景颜色	background-color
背景图片	background-image
背景平铺	background-repeat
背景位置	background-position
背景固定	background-attachment

三、盒子排列有序

1.标准流

块级元素
行内元素
行内块元素

块级元素、行内元素、行内块元素根据自身特性进行排列。

2.浮动

左浮 float: left;
右浮 float: right;

脱离标准流。浮动的盒子顶端对齐，中间没有间隙。浮动后出现问题首先看看要不要清除浮动。

3.定位

固定定位 position: fixed;
绝对定位 position：absolute;
相对定位 position: relative;

绝对定位和固定定位都脱离标准流。相对定位不脱标。重点掌握下“子绝父相”。

hao120929655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录