CSS基础语法

最新推荐文章于 2023-12-15 08:56:02 发布
最新推荐文章于 2023-12-15 08:56:02 发布
阅读量370 收藏 2
点赞数 1
文章标签： css 前端 javascript
star
本文链接：https://blog.csdn.net/qq_53386137/article/details/125713086
版权

css的书写方式

  • 内嵌式

    代码展示：
    <style>
    div{
        color: pink;    /*设置颜色为粉色*/
        font-size: 52px; /*设置字号为52像素*/
    }
</style>
    效果如下：

在这里插入图片描述

注意：<style></style>标签写在<head></head>标签内

  • 外链式：

    代码展示：
    <link rel="stylesheet" href="demo.css">
    效果如下：

在这里插入图片描述

注意：外链式需要新建一个demo.css的文件，里面书写css样式风格

在这里插入图片描述

  • 行内式：

    代码展示：
    <p style="color:red; font-size:30px">行内式样式表应用例子</p>
    效果如下：

在这里插入图片描述

css选择器

  • 标签选择器

    代码展示：
    <style>
    h1{					/*h1标签选择器*/
        color:red;
        font-family:"楷体";
    }
	p{					/*p标签选择器*/
        color: green;
        font-family:"隶书";
    }
</style>
    效果如下：

在这里插入图片描述

  • 类选择器

    代码展示：
    <style>
    .p{
        color:rgb(102,0,128);
        font-family:"仿宋";
        font-size:25px;
    }
</style>
...
<p class="p">这是类选择器的应用例子</p>
    效果如下：

在这里插入图片描述

  • 通配符选择器

    代码展示：
    <style>
    *{        
    color:red;
    font-family:"黑体";
}
</style>
    效果如下：

在这里插入图片描述

所有元素标签都会使用*通配符设置的样式

  • id选择器

    代码展示：
    <style>
    #red {
        color: red;
    }
</style>
...
<p id="red">这是红色字体</p>
    效果如下：

在这里插入图片描述

css文字属性

  • 文字颜色

    代码展示：
    <style>
    div{
        color:#ff6600;
    }
</style>
    效果如下：

在这里插入图片描述

  • 文本装饰

    代码展示：
    <style>
        .xiahuaxian {
            text-decoration: underline;
            color: rgb(209, 192, 255);
            font-size: 150px;
            line-height:260px;
        }
        .shanghuaxian {
            text-decoration: overline;
            color: rgb(197, 255, 192);
            font-size: 150px;
            line-height:260px;
        }
        .shanchuxian {
            text-decoration: line-through;
            color: pink;
            font-size: 150px;
            line-height:251px;
        }
        a {
            text-decoration:none;
            color: pink;
            font-size: 150px;
            line-height:251px;
        }
    </style>
...
<div class="xiahuaxian">这是下划线</div>
    <div class="shanghuaxian">这是上划线</div>
    <div class="shanchuxian">这是删除划线</div>
    <a href="https://www.w3school.com.cn/" target="_blank">w3school</a>
    效果如下：

在这里插入图片描述

  • 文本对齐方式

    代码展示：
    <style>
        /* 水平对齐方式 */
        #juzhong {
            text-align: center;
            color: pink;
            font-size: 150px;
        }
        #zuoduiqi {
            text-align: left;
            color: rgb(0,253,252);
            font-size: 150px;
        }
        #youduiqi {
            text-align: right;
            color: #fff065;
            font-size: 150px;
        }
       
    </style>
...
 <div id="juzhong">居中</div>
   <div id="zuoduiqi">左对齐</div>
   <div id="youduiqi">右对齐</div>
    效果如下：

在这里插入图片描述

  • 文本缩进

    代码展示：
        <style>
        div {
            text-indent: 20em;
            /* 单位：em相对单位
                 px像素单位 */
        }
    </style>
...
<div>首行缩进，20个当前元素20个距离的缩进</div>
    <p>没有缩进的效果没有缩进的效果没有缩进的效</p>
    效果如下：

在这里插入图片描述

  • 行间距

    代码展示：
    <style>
        div {
            line-height: 26px;
            /* 行间距 = 上间距 + 文字高度 + 下间距
            改变行间距就是改变上间距和下间距 */
        }
    </style>
...
<div>风急天高猿啸哀,</div>
    <p>渚清沙白鸟飞回。</p> 
    <p>无边落木萧萧下,</p>
    <p>不尽长江滚滚来。</p>
    效果如下：

在这里插入图片描述

  • 字体

    代码展示：
    <style>
 	h3{
        font-family:"微软雅黑";   /*设置字体*/
    }
	p{
        font-family:"楷体";	   /*设置字体*/
        color: red;
    }
</style>
<body>
    <h3>红豆</h3>
    <p><strong>红豆生南国，</strong></p>
    <p><em>春来发几枝。</em></p>
    <p><ins>愿君多采撷，</ins></p>
    <p><del>此物最相思。</del></p>
    <b>红豆生南国，</b><br />
    <i>春来发几枝。</i><br />
    <u>愿君多采撷，</u><br />
    <s>此物最相思。</s>
</body>
    效果如下：

在这里插入图片描述

  • 字体粗细

    代码展示：
    <style>
        h3 {
            /* 字体粗细 */
            font-weight: bold;
             color: blue;
        }
</style>
...
<h3>红豆</h3>
    效果如下：

在这里插入图片描述

  • 字体大小：

    代码展示：
    <style>
    p{
        font-size:30px;         /*设置字体大小*/
         font-family: "隶书";   /*设置字体*/
            color: green;       /* 颜色 */
    }
</style>
    效果如下：

在这里插入图片描述

  • 字体样式：

    代码展示：
    <style>
    h5{
        font-style: oblique;
    }
</style>
    效果如下：

在这里插入图片描述

注意：

取值：

​ normal：默认值，正常字体。

​ italic：斜体。对于没有斜体变量的特殊字体，将应用 oblique

​ oblique：倾斜的字体。

  • 字体复合属性：

    代码展示：
    <style>
div {font: italic 700 16px/50px "微软雅黑";
    color:green;
    }
</style>
...
<div>这是复合属性的测试</div>
    效果如下：

在这里插入图片描述

注意：复合属性：

font：font-style font-weight font-size/lin-height font-family;

​ 严格按照顺序写，不能随意更换 各个属性值之间用空格隔开

​ 不需要的属性可以省略，但是font-size，font-family必须要有。不然不起作用

css背景

  • 背景颜色

    代码展示：
    <style>
        div {
            background-color: pink;  
        }
    </style>
...
<div>背景颜色示例</div>
    效果如下：

在这里插入图片描述

注意：

background-color:

取值：

​ transparent(透明)

​ color(其他色彩)

  • 背景平铺

    代码展示：
       <style>
        div {
            width: 2000px;
            height: 2000px;
            background-image: url(bg2.png);
            /* 背景平铺 */
            background-repeat: repeat;
            /* 背景不平铺
            background-repeat:no-repeat; */
        }
    </style>
    效果如下：

在这里插入图片描述

注意：

取值：

背景平铺

​ background-repeat: repeat;

背景不平铺

​ background-repeat:no-repeat;

  • 背景固定

    代码展示:
    <style>
        div {
            width: 2000px;
            height: 2000px;
            background-image: url(bg.jpg);
            /* 跟随内容滚动 */
            background-attachment: scroll;
            /* 固定位置
            background-attachment: fixed; */
        }
    </style>
    效果如下：

在这里插入图片描述

注意：

取值：

跟随内容滚动

​ background-attachment: scroll;

固定位置

​ background-attachment: fixed;

  • 背景半透明

    代码展示：
    <style>
        div {
            width: 300px;
            height: 300px;
            /* background: rgba(0, 0, 0, 0.5); */
            /* 最后一个参数是alpha透明度介于0-1. */
            background: rgba(0, 0, 0, .5);
            /* 只是让盒子里面的背景色半透明，
            对盒子里面的内容没影响 */
        }
    效果如下：

在这里插入图片描述

css三大特性

  • 继承性

    代码展示：
    <style>
        div {
            color: greenyellow;

            /* text-align: center; */

            font: 80px/1.5 "隶书";
        }

        p {
            /* 子元素继承父元素div的行高1.5 */
            /* 这个1.5是当前元素文字大小font-size的1.5倍,也就是50px*1.5大小 */
            font-size: 50px;
        }

        /* 继承一般可以继承font，text，color等的属性 */
    </style>
...
<div>
        <p>子标签继承了父标签的某些属性</p>
        <ul>
            <li>继承了div的属性</li>
        </ul>
        <!-- 行高的继承 -->

        <span>继承了div的行高</span>

    </div>
    效果如下：

在这里插入图片描述

  • 层级性

    代码展示：
       <style>
        div {

            color: red;
            font-family: "隶书";
            font-size: 29px;
        }

        div {
            color: pink
        }
    </style>
...
 <div>相同的选择器设置相同的属性，就近原则<br>
        靠近标签的属性会覆盖之前的属性<br>
        不同的属性则没有影响。
    </div>
    效果如下：

在这里插入图片描述

  • 优先级

    代码如下：
    <style>
        div {
            color: red !important;
        }

        .nav {
            color: pink;
        }
</style>
...
 <p class="nav">优先级测试</p>
    效果如下：

在这里插入图片描述

注意 权重越大越优先，权重可以叠加

继承的权重是0

​ !important(∞) > 行内式style=“”(1000) > id选择器(100) > 类选择器,伪类选择器(10) > 标签选择器(1) > *通配符选择器(0)

​ 无穷大 > 1,0,0,0 > 0,1,0,0 > 0,0,1,0 > 0,0,0,1 > 0,0,0,0

css复合选择器

  • 并集选择器

    代码展示：
      <style>
        div,
        p,
        .pig li {
            color: pink;
        }
    </style>
...
<div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
    效果如下：

在这里插入图片描述

并集选择器用英文,逗号分隔

​ 并集选择器喜欢竖着写，

​ 最后一个选择器不需要逗号，

​ 任何选择器都可以作为并集选择器的一部分、

​ 适用于需要设置相同元素的不同标签

  • 后代选择器

    代码展示：
    <style>
        ol li {
            color: pink;
        }

        ul li {
            font-size: 52px;
        }

        table tr td {
            color: pink;
        }

        #nav li {
            color: pink;
        }
    </style>
...
 <ol>
        <li>我是ol的子选择器</li>
    </ol>
    <ul>
        <li>我是ul的子选择器</li>
    </ul>
    <table border=1>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
        </tr>
    </table>
    <ul>
        <li>我是ul的子选择器</li>
    </ul>
    <ul id="nav">
        <li>我是ul的子选择器</li>
    </ul>
    效果如下：

在这里插入图片描述

可以选择父选择器中的子选择器

元素1 空格 元素2 {声明样式}

元素1是父级，元素2是子级。

元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可

适用于子标签或者孙子标签

  • 伪类选择器

    代码展示：
       <style>
        a:link {
            color: black;
        }

        a:visited {
            color: red;
        }

        a:hover {
            color: green;
        }

        a:active {
            color: pink;
        }
    </style>
    效果如下：

在这里插入图片描述

向某些选择器添加特殊效果，比如超链接添加效果，或选择第一个，第n个元素 ：

a:link 选择所有未被访问的链接

a:visited 选择所有已被访问的链接

​ a:hover 选择鼠标指针位于其上的链接

​ a:active 选择活动链接(鼠标按下未弹起的链接)

​ 严格按照以上顺序添加效果 Link->Visited->Hover->Active

  • 子选择器

    代码展示：
     <style>
        .nav>a {
            color: red;
        }

        .class ul li a {
            color: red;
        }

        .hot>a {
            color: green;
        }
    </style>
...
  <div class="nav">
        <!-- 第一个a标签和p标签都是div的儿子 -->
        <a href="#">红色字体</a>
        <!-- 第二个a标签是div的孙子 -->
        <p><a href="">无作用</a></p>
    </div>
    <div class="class">
        <ul>
            <li><a href="#">百度</a></li>
            <li><a href="#">腾讯</a></li>
        </ul>
    </div>
    <div class="hot">
        <a href="#">大肘子</a>
        <ul>
            <li><a href="#">猪头</a></li>
            <li><a href="#">猪尾巴</a></li>
        </ul>
    </div>
    效果如下：

在这里插入图片描述

注意：适用于亲儿子类选择器，对孙子类选择器无作用

  • focus伪类选择器

代码展示：
<style>
        input:focus {
            background-color: yellow;
        }

        textarea:focus {
            background-color: pink;
        }
    </style>
...
 <input type="text">
    <input type="text">
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
效果如下：

在这里插入图片描述

用于选取获得焦点的表单元素

css盒子模型

  • 边框

    代码展示：
    <style>
        div {
            width: 200px;
            height: 200px;
            border-width: 5px;
            border-style: solid;
            border-color: pink;
        }
</style>
    效果如下：

在这里插入图片描述

边框有边框宽度(粗细)，边框样式，边框颜色

边框会影响盒子大小

  • 内边距

    代码展示：
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            padding: 50px;
        }
</style>
...
<div>这是盒子模型里面的内容</div>
    效果如下：

在这里插入图片描述

  • 外边距

    代码展示：
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* .one{
            margin-bottom:20px;
        } */
        .two{
            margin:20px;
            border-width:10px;
            border-style:solid;
        }
</style>
...
 <div class="one">1</div>
    <div class="two">2</div>
    效果如下：

在这里插入图片描述

  • 外边距合并

    代码展示:
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 100px;
            border-top:2px solid transparent;          
        }

        #son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 50px;
        }
    </style>
...
<div class="father">
        <div id="son"></div>
    </div>
    效果如下：

在这里插入图片描述

  • 清除内外边距

    代码展示：
    <style>
         /* css第一行代码*/
        *{
            margin:0;
            padding:0;
        }
        span{
            margin:0 20px 0;
        }
    </style>
...
 <div>内外边距被清除了。</div>
    <span>行内元素尽量把值设置为左右的内外边距</span>
    效果如下：

在这里插入图片描述

  • padding不会影响盒子大小的情况

    代码展示：
    <style>
        /* 如果盒子本身没有指定width/height属性，则padding不会撑开盒子 */
        h1{
            height:200px;
            padding:30px;
            background-color: pink;
        }
        div{
            /* 如果指定宽度，则会撑开 */
            width: 300px;
            height: 100px;
            background-color: purple;
            padding:30px;
        }
        div p{
            padding:30px;
            background-color: skyblue;
        }
    </style>
...
 <h1></h1>
    <div>
        <p></p>
    </div>
    效果如下：

在这里插入图片描述

Duck不必︎
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
css基础教程之CSS基础语法
09-25
CSS（层叠样式表）是用于控制网页元素外观的关键技术。在本教程中，我们将深入探讨CSS的基础语法，包括如何应用样式以及选择器的使用。...为了创建美观且易于管理的网页，掌握CSS基础语法至关重要。
HTML 学习记录3.2 CSS基础语法 选择器 创建形式
01-08
【CSS基础语法与选择器详解】 CSS，全称为层叠样式表（Cascading Style Sheets），是用于控制HTML或XML文档呈现样式的计算机语言。它为HTML内容提供了丰富的外观和布局设计，使得网页设计更加灵活多样。在HTML中，...
01css简介
Braveryya的博客
11-04 366
css简介 使用场景 css的主要使用场景就是美化网页，布局页面的 为啥不用HTML设置布局网页 说起 HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如 < h1> 表明这是一个大标题，< p> 表明这是一个段落，< img> 表明这儿有一个图片，< a> 表示此处有链接。 很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点：丑。 虽然 HTML 可以做简单的样式，但是带来的是无尽的臃肿和繁琐 css介绍 css是
CSS样式代码大全
weixin_72964830的博客
09-08 2558
html+css可以很方便的进行网页的排版布局，还能减少很多不必要的代码。\n\n一.文本设置\n1、font-size: 字号参数 \n2、font-style: 字体格式\n3、font-weight: 字体粗细\n4、颜色属性\ncolor: 参数\n注意使用网页安全色\n\n二、超链接设置\ntext-decoration: 参数\n主要用途是改变浏览器显示文字链接时的下划线。 \n参数取值范围： \nunderline：为文字加下划线 \noverline：为文字加上划线 \nline-throu
50种css常用的代码（实用）
最新发布
m0_64590669的博客
12-15 5963
50种css常用的代码（实用）
HTML5 & CSS3初学者指南(1) – 编写第一行代码
12-20 219
介绍 网络时代已经到来。现在对人们来说，每天上网冲浪已经成为一种最为常见的行为。 在网页浏览器中输入一段文本地址，就像http://www.codeproject.com，等待一下，网页就加载到浏览器窗口中。一个典型的网页是由文本、图像和链接组成的。除去内容上的差异，不同网站的网页也具有不同的外观和感受，以实现在网络上建立自己的身份品牌的目的。 如果你也曾想要了解你屏幕上的这些网页...
CSS基础语法，小白学习专用，上手快（清晰）
11-22
刚学习前端的小白，思路更加清晰
css的语法介绍 css基础
09-25
CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）
42个来自《 CSS世界》中的实用技巧
web前端开发
12-21 620
来自 | 《css世界》一书1、清除浮动主要为子元素浮动（float）之后，父元素无法撑起高度和宽度。<!-- html --><div class="clea...
CSS基础知识汇总（代码+知识点框图）
08-21
代码+知识点汇总，采用xmind框图导出，知识点简单明了，无论是学过还是没学过，通过这个资料过一遍绝对对CSS整体清楚明了
CSS样式操作大全——基本语法篇
happy81997的博客
03-31 1853
CSS样式操作大全
Css-常用指令大全
唯见青山不见君
10-27 1091
Css-常用指令大全
html中css代码示例,HTML中CSS入门基础(示例代码)
weixin_36488616的博客
06-10 436
HTML.CSS实用css有三种格式：内嵌；内联；外部；分类：内联：写在标记的属性位置，优先级最高，重用性最差内嵌：写在页面的head中，优先级第二，重用性一般外部：写在一个以css结尾的文件中，通过引用来建立文件与html页面的关系，优先级最低，但是最灵活最好用，重用性最好。经常用的就是内联和外部。外部的话需要引用。选择器：id选择器：#id，优先级最高，只能选中一个元素class选择器：.cl...
css基础
lp_607的博客
08-03 227
1.设置按钮的背景图片 示例代码如下： #but{ background-image: url("btn.png"); background-position: -1189px 517px; width: 213px; height: 68px; border-radiu
前端开发学习01 - 初识html和css
qq_47918606的博客
07-19 151
个人学习记录
CSS基本语法
m0_73503454的博客
04-08 613
CSS基本语法
【CSS学习笔记一】CSS入门基本知识、四类基础选择器、设置字体属性、设置文本属性
waski的博客
10-21 307
【CSS学习笔记一】CSS入门基本知识、四类基础选择器、设置字体属性、设置文本属性
css基础语法
molecule_9的博客
11-04 915
margin传递问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。不设置content的现象（宽高不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码）: inline-block(BFC规范)，不推荐，父容器会影响到后面的元素。当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。出现在上下margin同时出现的时候，会取上下中值较大的作为叠加的值。: clear属性，表示清除浮动的，left、right、both。
css html 语法,CSS基础语法
06-09
CSS语法由选择器、属性和值组成。选择器用于选择要设置样式的元素，属性用于指定要设置的样式，值用于定义样式的具体属性值。 下面是一个简单的CSS代码示例： ```css p { color: red; font-size: 16px; font-...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Duck不必︎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值