文章目录

代码示例

  • 格式
<style>

   css样式代码
</style>

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--两个style-->
<style>
    span{
        font-size: 20px;
        color: blue;
        border: 5px solid royalblue;
    }
    div{
        font-size: 100px;
        color: yellow;
    }
</style>
<body>

  <span>dc来了</span>
  <div>牛马</div>
</body>

</html>

在这里插入图片描述

基本选择器

元素选择器，标签名

  • 格式
标签名{
	css样式代码
}

适用场景：将相同样式作用在多个同名标签上
示例：

<style>
   
    div{
        font-size: 100px;
        color: red;
    }
</style>
<body>
    <div>好天气</div>
</body>

在这里插入图片描述

类选择器， .类名

  • 格式
.类名{
	css样式代码
}

适用场景：将相同样式作用在多个相同类名标签上
示例：

<style>

    .hobby{
        font-size: 100px;
        color: red;
    }
    .weather{
        font-size: 20px;
        color : blue;
    }
</style>
<body>


    <div class="weather">好天气</div>
    <div class="hobby"> 打游戏</div>

</body>

在这里插入图片描述

ID选择器，#

  • 格式
#id值{
	css样式代码
}

适用场景：将相同样式作用在指定标签上
示例：


<style>

    #fir{
        font-size: 20px;
        color: gray;
    }
</style>
<body>
<div id="fir"> 好天气</div>
</body>

在这里插入图片描述

层次选择器

子选择器， >

  • 格式
选择器1 > 选择器2{
	css样式代码
}

适用场景：选择器1里的选择器2
示例：

<style>

    body > span{
        font-size: 20px;
        color: red;
    }
</style>
<body>
<div id="fir"> 好天气</div>

<span> 小飞棍</span>
<br>
<span> 来了</span>
</body>

在这里插入图片描述

相邻的兄弟选择器， +

  • 格式
选择器1 + 选择器2{
	css样式代码
}

适用场景：选择器1 后面的**第一个**选择器2 的元素,同层级!
示例：


<style>

    div + span{
        font-size: 30px;
        color: aqua;
    }
</style>
<body>
<div id="fir"> 好天气</div>

<span> 小飞棍</span>
<br>
<span> 来了</span>
</body>

在这里插入图片描述

通用选择器， ~

  • 格式
/*通用兄弟选择器，当前选中元素的  向下的所有兄弟元素 */

选择器1 ~ 选择器2{
	css样式代码
}

适用场景：选择器1 后面的**所有**选择器2 的元素
示例：

<style>

    div ~ span{
        font-size: 30px;
        color: red;
    }
</style>
<body>
<div id="fir"> 好天气</div>

<span> 小飞棍</span>
<br>
<span> 来了</span>
</body>

在这里插入图片描述

属性选择器（常用）

<style>
    .demo >a{
        display: block;
        height: 50px;
        width: 50px;
        float:left;
        border-radius: 10px;
        background: blue;
        text-align: center;
        color: beige;
        text-decoration: none;
        margin-right: 5px;
        font: bold 20px/50px Arial;
    }
    /*属性名，属性名=属性值（正则）
    =表示绝对等于
    *=表示包含
    ^=表示以...开头
    $=表示以...结尾
    存在id属性的元素  a[]{}
    */

     /*a[id]{*/
     /*    background: red;*/
     /*}*/

    /*id=first的元素*/

    /*a[id=first]{*/
    /*      background: aqua;*/
    /* }*/

    /*class中有links元素*/

     /*a[class = "links item2 first2"]{*/
     /*    background: orange;*/
     /*}*/

    /*a[class*="links"]{*/
    /*    background: black ;*/
    /*}*/

    /*选中href中以http开头的元素*/

    a[href^="http"]{
        background: gray;
    }
</style>

<body>

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="/adad/faf" class="links item2 first2" >2</a>
    <a href="qwe123" class="links item3 first3" >3</a>
    <a href="eweqe" class="links item4 first4" >4</a>
    <a href="rrrrr" class="links item5 first5" >5</a>
    <a href="ttt" class="links item6 first6" >6</a>
    <a href="yyy" class="links item7 first7" >7</a>
</p>

</body>

依次试验 即可
在这里插入图片描述

美化网页元素

介绍

span标签：重点要突出的字，使用span标签套起来
font-family：字体
font-size：字体大小
font-weight：字体粗细…
div标签，可用于居中，div独占一行！

示例：

<style>
    span{
        font-size: 20px;
        font-family: 楷体;
        font-weight: bold;
        color: orangered;

    }
</style>

<body>

<span>  学习知识！</span>
</body>

在这里插入图片描述

字体样式

font-weight: bolder;/*也可以填px，但不能超过900,相当于bloder*/
/*常用写法：*/
font:oblique bloder 12px "楷体"

文本样式

  • 颜色–>color
  • 文本对齐方式–>text-align：center
  • 首行缩进–>text-indent：2em
  • 行高–>line-height：300px；
  • 下划线–>text-decoration
text-decoration:underline/*下划线*/
text-decoration:line-through/*中划线*/
text-decoration:overline/*上划线*/
text-decoration:none/*超链接去下划线*/

文本，阴影和超链接伪类

<style>
    a{/*超链接有默认的颜色*/
        text-decoration:none;
        color:#000000;
    }
    a:hover{/*鼠标悬浮的状态*/
        color:orange;
    }
    a:active{/*鼠标按住未释放的状态*/
        color:green
    }
    a:visited{/*点击之后的状态*/
        color: black;
    }
</style>

盒子模型

边框

在这里插入图片描述

内边距

在这里插入图片描述

外边距

在这里插入图片描述

代码，自己调整参数理解！

<style>
     div{
         border-top: 10px solid  black;
         border-bottom: 10px solid red;
         border-left: 10px solid red;
         border-right: 10px solid red;
         border-top-left-radius: 5px;  /* 顶部 左边的 圆半径大小*/
         border-top-right-radius: 5px;
         border-bottom-left-radius: 9px;
         border-bottom-right-radius: 5px;

         padding-top:5px;
         padding-bottom: 5px;
         padding-left: 5px;
         padding-right: 5px;
         text-align: center;
         margin-top: 0px;
         margin-bottom: -17px;
         margin-left: 50px;
         margin-right: 50px;
     }

     a
     {
         border: 5px solid red;
         padding: 5px;
     }
 </style>

<body>
<div>我想</div><br/>
<a>你想吗?</a>
<br>
</body>
# css # html # css3
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区