一、简单了解什么是 CSS

CSS 的工作就是将网页元素排版进行精确的控制实现美化页面效果

CSS的基本语法规则如下
选择器 + {一条 / N条声明}

对于 CSS 有下面几种写的方式

    &lt;p&gt;这是内部样式</p&gt;
    <!--内部样式--&gt;
    <style&gt;
        p {
            color: red;
            font-size: 30px;
        }
    </style&gt;

在这里插入图片描述

    <p style="color: green; font-size: 40px;"> 
        内联样式
    </p>

在这里插入图片描述

p { 
    color: blue;
    font-size: 50px;
}

这是 html代码

    <!--这里外部样式的引入方式-->
    <link rel="stylesheet" href="style.css">
    <p>
        外部样式的测试
    </p>

在这里插入图片描述

二、CSS 选择器

1.标签选择器

style 标签使用 {},在 { 前面写上标签名称。 此时,就意味着会选中当前页面所有指定的标签

    <style>
        p{
            color: blueviolet;
        }
    </style>
    <p>
        这是 css 选择器测试
    </p>

    <div>
        <p>
            这是divcss 选择器测试
        </p>
        <p>
            这是divcss 选择测试
        </p>
        这是一个 div
    </div>

在这里插入图片描述

2.类选择

可以创建 CSS 类,手动来指定哪些元素使用这个类。

    <style>
        /* 此处定义一个 css 类,名字one */
        .one{
            color: aqua;
        }
        .two{
            color: gray;
        }
        .three{
            color: fuchsia;
        }
        .four{
            font-size: 30px;
        }
    </style>

    <div class ="one">
        这是第一个div
    </div>

    <div class="two">
        这是第二个div
    </div>

    <div class="three">
        这是第三个div
    </div>

在这里插入图片描述
这里我们已知类选择器的使用方式,但是,还需要注意:
一个类,可以被一个元素引用,也可以多个元素引用
一个元素可以引用一个类,也可以引用多个类。

    <div class ="one four">
        这是引用多个类的div
    </div>

在这里插入图片描述

3.ID 选择

html 中的每个元素,都是可以设置一个唯一id 作为元素的身份标识

    <style>
        #oneDiv{
            color: darkred;
        }
        #twoDiv{
            color: darkorange;
        }
    </style>


    <div id="oneDiv">
        这是一个测试ID选择器的div
    </div>

    <div>
        这是一个测试ID选择器的另一个div
    </div id="twoDiv">

在这里插入图片描述

总结类选择器 和 ID选择器 两者的特点。
类选择器, 是可以让多个元素应用用一个类的。
ID 选择器,只能针对唯一元素生效,一个页面中只能有唯一的 ID。

4.后代选择器

    <style>
        ul li {
            color: red;
        }
    </style>

这里代码的含义是,在页面中找到所有的 ul然后在这些 ul 中找到所有的 li

注:
这里的 li 只要是 ul 的后代即可,不一定非得是 “子元素”。

    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>

    <ul>
        <li>aaa</li>
        <ul>
            <li>111</li>    
        </ul>
        <li>bbb</li>
        <li>ccc</li>
    </ul>

在这里插入图片描述

5.子选择器

只是找到匹配的单一的子元素,不找其他孙子元素之类的。

    <style>
        .test>ul{
            color: rgb(223, 92, 5);
        }
    </style>

这里的代码含义是,只在 .test 的子元素中找到 ul 标签。

    <div class="test">
        <ul>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>            
        </ul>
    </div>

在这里插入图片描述

6.伪类选择器

前面 的选择器是选中某个元素。
伪类选择器选中的是某个元素的特定状态

:hover 鼠标悬停时的状态。
:active 鼠标按下时的状态。

    <style>
        .one1:hover{
            color: green;
            font-size: 30px;
        }
        .one1:active{
            color: greenyellow;
            font-size: 50px;
        }
    </style>
    <div class="one1">
        这是一个测试伪类选择器的div
    </div>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、字体属性

1.设置字体家族

font – family 当前使用哪种字体来显示

    <style>
        .one{
            font-family: 宋体;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述
注: 这个属性指定的字体,需要系统已经安装了的。

2.设置字体大小

font – size 单位px(像素)

    <style>
        .one{
            font-size: 40px;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述

3.设置字体粗细

font – weight
实际设置是有两种设置风格
1.使用单词
在这里插入图片描述

    <style>
        .one{
            font-weight: bold;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述

2.使用数字

    <style>
        .one{
            font-weight: 100;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述

4.文字倾斜

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

在这里插入图片描述

四、文本属性

1.文本对齐

textalign 属性来设置对齐方式

对齐方式有下面三种
center居中对齐
left:左对齐
right:右对齐

在这里就只演示 center 居中对齐.

    <style>
        .one{
            text-align: center;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述

2.文本装饰

textdecoration 属性来进行文本装饰

装饰的常用取值有下面几个:
underline 下划线
none 什么都没有可以给 a 标签去掉下划线
overline 上划线
line – through 删除线

下划线

    <style>
        .one{
            text-decoration: underline;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述

none

    <style>
        a{
            text-decoration: none;
        }
    </style>
    <br>
    <a href="#">百度</a>
    <br>

在这里插入图片描述

overline 上划线

    <style>
        .one{
            text-decoration: overline;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述

line – through 删除线

    <style>
        .one{
            text-decoration: overline;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述

3.文本缩进

text – indent 每个段落首行缩进两个文字
这里常用的单位em 。这个单位表示的是一个相对的量。是以问字尺寸为基础进行设置的。

    <style>
        .one{
            font-size: 40px;
            text-indent: 2em;
            line-height: 60px;
        }
    </style>
    <div class="one">
        文本缩进
    </div>

在这里插入图片描述
这就很明显的展示出了是相对文字进行缩进的。

这里要说明一个新名词 —— 行高
行高 = 文字高度 + 行间距
在这里插入图片描述

4.背景设置

设置背景分为两种:
1.设置背景颜色 background – color 设定单一颜色
2.设置背景图片 backgroundimageurl(图片路径);

这里我直接演示如何设置背景图片

    <style>
        .one{
            background-image: url(touxiang.png);
            /* 这里设定一个较大的高度便于观察 */
            height: 1000px;
        }
    </style>
    <div class="one">
        这是背景
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore nemo, necessitatibus beatae voluptatibus rem esse, quam unde voluptatem excepturi impedit pariatur nulla nobis facilis voluptates odit delectus, incidunt qui deleniti.
    </div>

在这里插入图片描述
如图所示,会出现一个这样平铺的效果

backgroundrepeat: norepeat 这段代码可以解决图片在页面平铺的问题

    <style>
        .one{
            background-image: url(touxiang.png);
            /* 这里设定一个较大的高度便于观察 */
            background-repeat: no-repeat;            
            height: 1000px;
        }
    </style>
    <div class="one">
        这是背景
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit vel soluta cupiditate laborum ipsa ex voluptatibus obcaecati, esse quisquam nisi, nulla facilis saepe consectetur voluptates repellendus magnam voluptas nostrum optio.
    </div>

在这里插入图片描述

此时,我们有会发现一个问题,就是背景图片出现在了左上角。如果我们想将图片转移到中间,呢么,background-position:
center center;
这串代码可以解决问题
这里就不在演示

background – size 设置背景图尺寸
由此,来实现背景图片页面全覆盖

    <style>
        .one{
            background-image: url(touxiang.png);
            /* 这里设定一个较大的高度便于观察 */
            background-repeat: no-repeat;            
            height: 1000px;
            background-position: center center;
            background-size: cover;
        }
    </style>
    <div class="one">
        这是背景
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit vel soluta cupiditate laborum ipsa ex voluptatibus obcaecati, esse quisquam nisi, nulla facilis saepe consectetur voluptates repellendus magnam voluptas nostrum optio.
    </div>

注: 这里的截图不好展示大家可以自行试验一下。

五、圆角矩形

我们编辑页面时,可以使用 div 通过限制其高度,宽度。以此来实现一个矩形。
但是,有时需要通过圆角矩形来让页面更加美化
对此,使用 borderradius: 可以实现需求

    <style>
         .one{
            /* 通过设置宽高限制范围 */
            width: 200px;
            height: 100px;
            /* 设置矩形的背景颜色 */
            background-color: black;
            color: white;

            text-align: center;
            line-height: 100px;
            /* 设定矩形的角的弧度像素数 */
            border-radius: 10px;
        }       
    </style>
        <div class="one">
        <p>
        这是一个测试圆角矩形的div            
        </p>
    </div>

在这里插入图片描述

六、CSS 盒子模型

在这里插入图片描述
如上图所示,这就是一个 html 的元素基本布局规则

1.介绍边框与外边框

要改变边框属性需要使用到一个关键字 border

默认情况下,直接使用 border 是直接设置了四个方向
实现准确的设置还有下面的操作
borderleft: 设置左边框
borderright:设置右边框
bordertop:设置顶部边框
borderbottom:设置下方边框

为了方便后面的解释,这里在引入一个关键字

marginbottom: 这个关键字控制外边,即,控制盒子盒子之间的距离

    <style>
                .one{
            width: 300px;
            height: 100px;
            background-color: cadetblue;
            color: blue;

            text-align: center;
            line-height: 100px;
            border: 10px black solid;

            /* 控制外边距让两个元素之间有间隙 */
            margin-bottom: 5px;
        } 
		/*这是对比元素*/
		        .contrast{
            width: 300px;
            height: 100px;
            background-color: chartreuse;
            color: black;

            text-align: center;
            /* 控制外边距让两个元素之间有间隙 */
            margin-bottom: 10px;
        }
    </style>
    <div class="eight">
        这是一个测试边框属性的div            
    </div>
    <div class="contrast">
        这是对比的div
    </div>

在这里插入图片描述
如上图所示我们发现边框添加会导致盒子的撑大。
对此,这里再引入一个属性 box-sizing: border-box;

        .one{
            width: 300px;
            height: 100px;
            background-color: cadetblue;
            color: blue;

            text-align: center;
            line-height: 100px;
            border: 10px black solid;

            box-sizing: border-box; 

            /* 让两个元素之间有间隙 */
            margin-bottom: 5px;
        } 

在这里插入图片描述

这里介绍几种边框样式:

2.介绍内边框

对于内边框,这里的属性关键字padding

padding 在这里应用有下面几种形式

这里使用第二种形式解释

    <style>
                .one{
            width: 300px;
            height: 100px;
            background-color: aquamarine;
            color: blueviolet;

            text-align: left;
            /* line-height: 100px; */
            border: 10px rgb(168,168,0) solid;

            box-sizing: border-box;

            padding: 10px 20px;

            margin-bottom: 15px;
        }
    </style>
    <div class="nine">
        这是一个测试内边距属性的div
    </div >

在这里插入图片描述

七、弹性布局

首先,我们先创建出一个 div,内部包含三个 span

    <style>
        div{
            width: 100%;
            height: 150px;
            background-color: red;
        }

        div>span{
            background-color: green;
            width: 100px;
            height: 100px;
        }
    </style>
        
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

在这里插入图片描述

开启弹性布局
displayflex

要给水平排列的父元素,设置 flex。这样水平方向上的尺寸边距就会变得比较可控。

设置元素的水平排列方式
justify-content: spacearound;

这里的排列方式的值,常用的有下面几条:
在这里插入图片描述

设置元素的垂直排列方式
align-items:

这里展现一个简单调整过的界面

    <style>
        div{
            width: 100%;
            height: 150px;
            background-color: red;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        div>span{
            background-color: green;
            width: 100px;
            height: 100px;
        }
    </style>
        
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

在这里插入图片描述
码子不易,您小小的点赞是对我最大的鼓励!!!

原文地址:https://blog.csdn.net/qq_62905847/article/details/130179242

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_19579.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注