CSS快速入门一

分类：菜鸟笔记作者：m0_51892736

CSS快速入门（一）

CSS

简述

CSS 是一门语言，用于控制网页表现。W3C标准规定了网页是由以下组成：

  • 结构：HTML
  • 表现：CSS
  • 行为：JavaScript
    CSS也有一个专业的名字：Cascading Style Sheet（层叠样式表）。

CSS的代码规范

格式规范:
-选择器名称{属性名1:属性值1;属性名2:属性值2;……}
选择器:即指定CSS样式作用在哪些HTML标签上。

代码规范:

  • 属性名和属性值之间是键值对关系；
  • 属性名和属性值之间用“：”连接，最后“；”结尾;
    例如:font-size:120px;
    如果一个属性名有多个值，多个值之间用空格隔开。"
    例如: border:5px solid red;
    CSS注释:/ * 注释内容 * /
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        span{
            font-size:60px;
            color:red;
            border:1px solid blueviolet;
            /* java */
        }
    </style>
</head>
<body>
    <span>111111111</span>
    <span>22222222</span>
</body>
</html>

在这里插入图片描述

CSS选择器

选择器

元素选择器

元素选择器：以HTML的标签名作为选择器名称

  • 格式：
    标签名{
    CSS样式代码
    }
    适用范围：适用于将样式作用在相同标签名的标签上。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
        span{
            font-size: 60px;
        }
        div{
            font-size: 60px;
        }
  </style>
</head>
<body>
    <span>我是span1111111</span>
    <span>我是span222222222</span>
    <div>我是div11111111</div>
    <div>我是div222222222</div>
</body>
</html>

在这里插入图片描述

类选择器

类选择器：即以HTML的类名（class属性值）作为选择器名称。

  • 格式：
    .类名{
    CSS样式代码
    }

适用范围：适用于将样式一次性作用在相同类名的标签上（即使标签名不同）。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .redF{
            color:red;
        }
    </style>
</head>
<body>
    <span>span1:我是黑色</span>
    <span class="redF">span2:我是红色</span>
    <div>div1:我是黑色</div>
    <div class="redF">div2:我是红色</div>
</body>
</html>

在这里插入图片描述

ID选择器

每个HTML标签都有一个id属性，id的属性值必须在本页面是唯一的。

ID选择器：选择CSS样式代码作用在某个规定ID值的HTML标签上。

  • 格式：
    #id值{
    CSS样式代码
    }

    适用范围：适用于将样式作用于某个标签上（更有针对性）

注意：
必须手动保证ID值在本页面是唯一的

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            color: red;
        }
    </style>
</head>
<body>
      <span>span1:我是黑色</span>
      <span >span2:我是红色</span>
      <div>div1:我是黑色</div>
      <div id="d1">div2:我是红色</div>
</body>
</html>

在这里插入图片描述

基本选择器的组合方式

层级关系

标签和标签之间有层级关系，例如:标签的子标签为标签。

我们可以对基本选择器进行组合，表现出层级关系，从而更加针对性地把样式作用于某些标签上。

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

是选择器1下的选择器2。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div font{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <font>我想变红</font>

        我想保持黑色
    </div>
    <font>我保持黑色</font>
</body>
</html>

在这里插入图片描述

CSS样式

边框属性

  • border:设置边框的样式。
    格式：border:宽度 样式 颜色;
    例如：border: 1px solid red;
    线条样式：solid实线 none无边 double双线

  • width：用来设置标签的宽度
    格式：width:** px;
    例如width：60px;

  • height：用来设置标签的长度
    格式：height:** px;
    例如height：60px;

  • background-color:设置标签的背景颜色
    背景颜色设置的两种主流方式:
    ①英文单词 例如:red blue yellow
    ②颜色代码 格式:#红绿蓝，每一个颜色用两个16进制位数表示+
    例如:#ff1100 红色ff，绿色11，蓝色00，红色颜色最重，绿色其次，没有蓝色。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div{
          border: 1px solid red;
          width:300px;
          height: 300px;
          background-color:#0011ff;
      }
    </style>
</head>
<body>
    <div>最难不过坚持</div>
</body>
</html>

在这里插入图片描述

布局

通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动属性float.

  • float:
    格式:
    选择器{float:属性值;}

float的常用属性值:

  • none:元素不浮动(默认值)
  • left:元素向左浮动
  • right:元素向右浮动

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
          background-color:red;
            width: 100px;
            height: 100px;
            float:right;
        }
        #d2{
            background-color:green;
            width: 80px;
            height: 80px;
            float: right;
        }
        #d3{
            background-color:blue;
            width: 60px;
            height: 60px;
            float: right;
        }

    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</body>
</html>

在这里插入图片描述

注意:因为元素设置浮动属性后，会脱离原有文档流(会脱离原有的板式)，从而会影响其他元素的样式，所以设置浮动以后，页面样式需要重新调整.

接着看代码，没有加float和加了的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title><style>
    #d1{
        background-color:red;
        width: 60px;
        height: 60px;
        float:left;
    }
    #d2{
        background-color:green;
        width: 80px;
        height: 80px;
        float:left;
    }
    #d3{
        background-color:blue;
        width: 100px;
        height: 100px;

    }

    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</body>
</html>

在这里插入图片描述

转换

HTML提供了丰富的标签，这些标签被定义成了不同类型，一般分为：块级元素和行内元素。

  • 块级元素：以区域块的方式出现，每个块标签占据一整行或多整行，块结束后会自动换行
    • 常见的块级元素：< h1 >,< p >,< div >,< ul >等
  • 行内元素：根据内容多少来占用行内元素，不自动换行
    • 常见的行内元素：< span >,< a >

display属性可以使元素在行内元素和块级元素之间相互转换。

  • 格式：选择器{display：属性值；}
  • display常用的属性值：
    • block:此元素将显为块元素(块元素默认的displav属性值)。
    • inline:此元素将显示为行内元素(行内元素默认的display属性值)。
    • none:此元素将被隐藏，不显示，也不占用页面空间。
      代码展示： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            display: inline;
        }
        li{
            display: inline;
        }
        span{
            display:block ;
        }
        a{
            display: none;
        }

    </style>
</head>
<body>
    <h1>块级元素1-div--由块级元素-----》行内元素【不自动换行】</h1>
    <div>div1</div>
    <div>div2</div>

    <h1>块级元素2-无序列表</h1>
    <ul>
        <li>赵庄</li>
        <li>张三</li>
        <li>王五</li>
    </ul>

    <h1>行内元素1-span--由行内元素-----》块级元素【自动换行]</h1>
    <span>span1</span>
    <span>span2</span>

    <h1>行内元素2--a</h1>
    <a>a1</a>
    <a>a2</a>
    你好
</body>
</html>

在这里插入图片描述

字体

字体在CSS下可以无限大

  • font-size:数字 px；
  • color：颜色；

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
          font-size: 120px;
          color: red;
        }
    </style>
</head>
<body>
    你好么
    <span>我想变大变红</span>
    你好啊
</body>
</html>

在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

html

相关推荐

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习编程？其实不难，不过在学习编程之前你得先了解你的目的是什么？这个很重要，因为目的决定你的发展方向、决定你的发展速度。
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等，根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生学习Java开发，但要结合自身的情况，先了解自己适不适合去学习Java，不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研，多看、多想、多练
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服务器有时候会断掉，所以写个shell脚本每五分钟去判断是否连接，于是就有下面的shell脚本。
SQL BETWEEN 操作符
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
​​windows上传ipa到开发者中心app store的方法
假如你已经使用过苹果开发者中心上架app，你肯定知道在苹果开发者中心的web界面，无法直接提交ipa文件，而是需要使用第三方工具，将ipa文件上传到构建版本，开...
SQL 入门篇之什么是别名？
下面的 SQL 语句指定了两个别名，一个是 name 列的别名，一个是 country 列的别名。**提示：**如果列名称包含空格，要求使用双引号或方括号：
windows上传ipa文件到app store的方法​
在使用H5混合开发的app打包后，需要将ipa文件上传到appstore进行发布，就需要去苹果开发者中心进行发布。​
SQL AND & OR 运算符
+----+--------------+---------------------------+-------+---------+
C++ 数组
数组的声明并不是声明一个个单独的变量，比如 number0、number1、...、number99，而是声明一个数组变量，比如 numbers，然后使用 nu...
最全iOS 应用上架流程提交到AppStore
第一步：到appuploader官网下载辅助工具和iCloud驱动，使用前面创建的AppID登录。
SQL ALTER TABLE 语句
如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
dism操作巨慢
前不久在制作win11pe，制作了一版，1.26GB，太大了，不满意，想再裁剪下，发现这次dism mount正常，commit或discard巨慢，以前都很快...
三种方法卸载Symantec Endpoint Protection 赛门铁克
赛门铁克各个版本概览：https://knowledge.broadcom.com/external/article?legacyId=tech163829
python3.6、python3.10用什么版本的pip
实测Python 3.6.6用pip 21.3.1，再高就报错了，Python 3.10.7用pip 22.3.1是可以的
博通和诺顿
Broadcom Corporation （博通公司，股票代号AVGO）是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
高版本c4d在低版本windows系统上打开后不显示窗格
发现个问题，server2016上安装了c4d这些版本，低版本的正常显示窗格，但红色圈出的高版本c4d打开后不显示窗格，
基础网络windows不要使用TAT、如何卸载TAT
TAT：https://cloud.tencent.com/document/product/1340
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot