CSS 基础语法

转x33g5p2x  于2022-02-07 转载在 CSS3  
字(8.6k)|赞(0)|评价(0)|浏览(613)

前言： 之前我们写了 Html 的部分简单标签，本篇，我们将学习 CSS 的基础语法

CSS 简介

1.什么是CSS？？

CSS: 层叠样式表 (Cascading Style Sheet)
是一组样式设置的规则，用于控制页面的外观样式，实现美化页面的效果，能够做到页面的样式和结
构分离

2.CSS 的作用

  • 实现内容与样式的分离，便于团队开发
  • 样式复用，便于网站的后期维护
  • 能够对网页中元素位置的排版进行像素级精确控制，让页面更精美

基本语法规范

选择器 + {
一条 / N条声明
}

  • 选择器决定针对谁修改 (找谁)
  • 声明决定修改啥 (干啥)
  • 声明的属性是键值对，使用 ；区分键值对，使用 ：区分键和值.
  1. <style>
  2.     p {
  3.         /* 设置字体颜色 */
  4.         color: red;
  5.         /* 设置字体大小 */
  6.         font-size: 30px;
  7.    }
  8. </style>
  10. <p>hello</p>

引入方式

1.内部样式表

写在 style 标签中，嵌入到 html 内部.
理论上来说 style 放到 html 的哪里都行；但是一般都是放到 head 标签中

  1. <head>
  2.     <title>style标签内联式 定义CSS</title>
  3.     <style>
  4.         p {
  5.             /* 设置文本颜色 */
  6.             color: chocolate;
  7.             /* 设置文本大小 */
  8.             font-size: 30px;
  9.         }
  10.     </style>
  11. </head>
  13. <body>
  14.     <p>p标签内容</p>
  15. </body>

优点缺点
这样做能够让样式和页面结构分离分离的还不够彻底. 尤其是 css 内容多的时候

2.行内样式表

通过 style 属性，来指定某个标签的样式
只适合于写简单样式，只针对某个标签生效

  1. <head>
  2.     <title>Html的标签元素中使用 style 属性</title>
  3.     <style>
  4.         p {
  5.             /* 设置文本颜色 */
  6.             color: chocolate;
  7.             /* 设置文本大小 */
  8.             font-size: 30px;
  9.         }
  10.     </style>
  11. </head>
  13. <body>
  14.     <p style="color: blue; font-size: 30px;">p标签内容</p>
  15. </body>

这种写法优先级较高，会覆盖其他的样式:

优点缺点
只适合于写简单样式，只针对某个标签生效不能写太复杂的样式. 这种写法优先级较高, 会覆盖其他的样式

3.外部样式

实际开发中最常用的方式:

  1. 创建一个 css 文件.
  2. 使用 link 标签引入 css
    < link rel=“stylesheet” href="[CSS文件路径]">

1.创建 css 文件:

  1. p {
  2.     color: red;
  3.     font-size: 30px;
  4. }

2.使用 link 标签:

  1. <head>
  2.     <title>引入外部CSS文件</title>
  3.     <link rel="stylesheet" href="3.引入的CSS文件.css">
  4. </head>
  6. <body>
  7.     <p>p标签内容</p>
  8. </body>

优点缺点
样式和结构彻底分离受到浏览器缓存影响, 修改之后 不一定 立刻生效

浏览器缓存:
网络访问一些静态的资源 (内容不会变化的文件，如 html 文件，css 文件，js 文件等)，浏览器为了提高性能，就提前缓存这些内容到磁盘上，下次访问发现访问的还是不会变的内容，就直接从本地获取，从而提高访问效率
使用 ctrl + F5 强制刷新，强制浏览器重新获取 css 文件

CSS 选择器

CSS 选择器详解 - 点击跳转

CSS 选择器详解

CSS 常用属性

字体属性

设置字体

  1. <head>
  2.     <title>设置字体</title>
  3.     <style>
  4.         #s1 {
  5.             font-family: 'Microsoft YaHei';
  6.         }
  7.         #s2 {
  8.             font-family: '宋体';
  9.         }
  10.     </style>
  11. </head>
  13. <body>
  14.     <span id="s1">
  15.         微软雅黑
  16.     </span>
  17.     <span id="s2">
  18.         宋体
  19.     </span>
  20. </body>

注意事项:

  • 字体名称可以用中文，但是不建议
  • 多个字体之间使用逗号分隔 (从左到右查找字体，如果都找不到，会使用默认字体)
  • 如果字体名有空格，使用引号包裹
  • 建议使用常见字体，否则兼容性不好
    浏览器和系统不支持的字体，写了也不会生效

字体大小 & 字体粗细

字体大小

  1. <head>
  2.     <title>字体大小</title>
  3.     <style>
  4.         #s1 {
  5.             /* 字体设置 */
  6.             font-family: 'Microsoft YaHei';
  7.             /* 字体大小 */
  8.             font-size: 40px;
  9.         }
  10.         #s2 {
  11.             font-family: '宋体';
  12.             font-size: 20px;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <span id="s1">
  19.         微软雅黑
  20.     </span>
  21.     <span id="s2">
  22.         宋体
  23.     </span>
  24. </body>

注意事项:

  • 不同的浏览器默认字号不一样，最好给一个明确值. (chrome 默认是 16px)
  • 可以给 body 标签使用 font-size
  • 要注意单位 px 不要忘记.
  • 标题标签需要单独指定大小

字体粗细

  1. <head>
  2.     <title>字体粗细</title>
  3.     <style>
  4.         #s1 {
  5.             /* 字体设置 */
  6.             font-family: 'Microsoft YaHei';
  7.             /* 字体大小 */
  8.             font-size: 40px;
  9.             /* 字体粗细 */
  10.             font-weight: 100;
  11.         }
  12.         #s2 {
  13.             font-family: '宋体';
  14.             font-size: 30px;
  15.             font-weight: 900;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21.     <span id="s1">
  22.         微软雅黑
  23.     </span>
  24.     <span id="s2">
  25.         宋体
  26.     </span>
  27. </body>

注意事项:

  • 可以使用数字表示粗细.
  • 700 = bold， 400 = normal，表示不加粗
  • 取值范围是 100 -> 900，数字越大，字体越粗

字体样式

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

  1. <head>
  2.     <title>文字样式</title>
  3.     <style>
  4.         #s1 {
  5.             /* 字体设置 */
  6.             font-family: 'Microsoft YaHei';
  7.             /* 字体大小 */
  8.             font-size: 40px;
  9.             /* 字体粗细 */
  10.             font-weight: 100;
  11.             /* 文本样式 */
  12.             font-style: italic;
  13.         }
  14.         #s2 {
  15.             font-family: '宋体';
  16.             font-size: 30px;
  17.             font-weight: 900;
  18.         }
  19.     </style>
  20. </head>
  22. <body>
  23.     <span id="s1">
  24.         微软雅黑
  25.     </span>
  26.     <span id="s2">
  27.         宋体
  28.     </span>
  29. </body>

文本属性

文本颜色

设置文本颜色：
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
.

鼠标悬停在 vscode 的颜色上，会出现颜色选择器，可以手动调整颜色

color 属性值的写法:

  • 预定义的颜色值(直接是单词)
  • 十六进制形式 (最常用) ；如果两两相同，就可以用一个来表示：#ff00ff => #f0f
  • RGB 方式；rgb(0，0，0) — 黑色；rgb(255，255，255) — 白色

文本对齐

控制文字水平方向的对齐.
不光能控制文本对齐，也能控制图片等元素居中或者靠右

  • center: 居中对齐
  • left: 左对齐
  • right: 右对齐

举例:

  1. <head>
  2.     <title>文本对齐</title>
  3.     <style>
  4.         #d1 {
  5.             text-align: left;
  6.         }
  7.         #d2 {
  8.             text-align: center;
  9.         }
  10.         #d3 {
  11.             text-align: right;
  12.         }
  13.     </style>
  14. </head>
  16. <body>
  17.     <div id="d1">靠左</div>
  18.     <div id="d2">居中</div>
  19.     <div id="d3">靠右</div>
  20. </body>

文本装饰

语法：
text-decoration: [值];

常用取值:

  • underline 下划线. [常用]
  • none 啥都没有. 可以给 a 标签去掉下划线.
  • overline 上划线. [不常用]
  • line-through 删除线 [不常用]

举例:

  1. <head>
  2.     <title>文本装饰</title>
  3. </head>
  5. <body>
  6.     <div>
  7.         <p style="text-decoration: none;">啥都没有</p>
  8.         <p style="text-decoration: overline;">上划线</p>
  9.         <p style="text-decoration: line-through">删除线</p>
  10.         <p style="text-decoration: underline;">下划线</p>
  11.     </div>
  12. </body>

文本缩进 & 行高

  1. 缩进:

控制段落的 首行 缩进 (其他行不影响)
text-indent: [值];

举例:

  1. <body>
  2.     <p style="text-indent: 2em;">首行向右缩进2个文字</p>
  3.     <p style="text-indent: -2em;">首行向左缩进2个文字</p>
  4. </body>

注意事项

  • 单位可以使用 px 或者 em.
  • 使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
  • 缩进可以是负的，表示往左缩进.
  1. 行高

行高指的是上下文本行之间的基线距离
line-height: [值];

注意事项

  • 行高 = 上边距 + 下边距 + 字体大小
  • 行高也可以取 normal 等值
  • 行高等与元素高度，就可以实现文字居中对齐

举例:

  1. <body>
  2.     <div style="  line-height: 40px; font-size: 30px;">行高效果:</div>
  3.     <div style="  line-height: 40px; font-size: 30px;">行高效果:</div>
  4. </body>

背景属性

背景颜色

默认是 transparent (透明) 的，可以通过设置颜色的方式修改
background-color: [指定颜色]

举例:

  1. <body>
  2.     <div style="width: 500px; height: 100px;  background-color: palevioletred"></div>
  3. </body>

背景图片 & 背景平铺

  1. 背景图片

比 image 更方便控制位置(图片在盒子中的位置)
background-image: url(…);

举例:

  1. <body>
  2.     <div style="width: 220px; height: 220px; background-image: url('rose.jpg'); "></div>
  3. </body>

注意事项

  • url 不要遗漏.
  • url 可以是绝对路径，也可以是相对路径
  • url 上可以加引号，也可以不加.
  1. 背景平铺
    background-repeat: [平铺方式]

**重要取值:**默认是 repeat

  • repeat: 平铺
  • no-repeat: 不平铺
  • repeat-x: 水平平铺
  • repeat-y: 垂直平铺

背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方

举例:

  1. <head>
  2.     <title>背景平铺</title>
  3.     <style>
  4.         .number .one {
  5.             background-image: url(rose.jpg);
  6.             height: 220px;
  7.             background-repeat: no-repeat;
  8.        }
  9.         .number .two {
  10.             background-image: url(rose.jpg);
  11.             height: 220px;
  12.             background-repeat: repeat-x;
  13.        }
  14.         .number .three {
  15.             background-image: url(rose.jpg);
  16.             height: 800px;
  17.             background-repeat: repeat-y;
  18.        }
  19.     </style>
  20. </head>
  22. <body>
  23.     <div class="number">
  24.         <div class="one">不平铺</div>
  25.         <div class="two">水平平铺</div>
  26.         <div class="three">垂直平铺</div>
  27.     </div>
  28. </body>

背景位置 & 背景尺寸

  1. 背景位置

修改图片的位置
background-position: x y;

参数风格:

  • 方位名词: (top，left，right，bottom)
  • 精确单位: 坐标或者百分比 (以左上角为原点)
  • 混合单位: 同时包含方位名词和精确单位

举例:

  1. <head>
  2.     <title>背景位置</title>
  3.     <style>
  4.         .tmp .one {
  5.             background-image: url(rose.jpg);
  6.             height: 500px;
  7.             background-repeat: no-repeat;
  8.             background-color: rgb(104, 187, 176);
  9.             background-position: left;
  10.        }
  11.     </style>
  12. </head>
  14. <body>
  15.     <div class="tmp">
  16.         <div class="one">背景靠左</div>
  17.     </div>
  18. </body>

注意事项

  • 如果参数的两个值都是方位名词，则前后顺序无关 (top left 和 left top 等效)
  • 如果只指定了一个方位名词，则第二个默认居中 (left 则意味着水平居中，top 意味着垂直居中. )
  • 如果参数是精确值，则的的第一个肯定是 x，第二个肯定是 y (100 200 意味着 x 为 100，y 为 200)
  • 如果参数是精确值，且只给了一个数值，则该数值一定是 x 坐标，另一个默认垂直居中.
  • 如果参数是混合单位，则第一个值一定为 x，第二个值为 y 坐标 (100 center 表示横坐标为 100，垂
    直居中)
  • 计算机中的平面坐标系，一般是左手坐标系(y轴是往下指的)
  1. 背景尺寸
    background-size: length | percentage | cover | contain;

①可以填具体的数值: 如 40px 60px 表示宽度为 40px，高度为 60px，也可以填百分比: 按照父元素的尺寸设置.
②cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中
③把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

举例:

  1. <head>
  2.     <title>背景尺寸</title>
  3.     <style>
  4.         .tmp .one {
  5.             width: 500px;
  6.             height: 300px;
  8.             background-image: url(rose.jpg);
  9.             background-repeat: no-repeat;
  10.             background-color: rgb(104, 187, 176);
  11.             background-position: center;
  12.             background-size: contain;
  13.        }
  14.     </style>
  15. </head>
  17. <body>
  18.     <div class="tmp">
  19.         <div class="one">背景尺寸-contain</div>
  20.     </div>
  21. </body>
  • contain：

  • cover：

圆角矩形

通过 border-radius 使边框带圆角效果

基本用法
border-radius: length;
length 是内切圆的半径，数值越大，弧线越强烈

举例:

  1. <head>
  2.     <title>基本用法</title>
  3.     <style>
  4.         #d1 {
  5.             width: 300px;
  6.             height: 200px;
  7.             border: 2px solid red;
  8.             border-radius: 10px;
  9.         }
  10.     </style>
  11. </head>
  13. <body>
  14.     <div id="d1"></div>
  15. </body>

生成圆形

让 border-radius 的值为正方形宽度的一半即可
一般建议写 %50 更好

  1. <head>
  2.     <title>生成圆形</title>
  3.     <style>
  4.         #circular {
  5.             width: 200px;
  6.             height: 200px;
  7.             border: 2px solid red;
  8.             border-radius: 100px;
  9.         }
  10.     </style>
  11. </head>
  13. <body>
  14.     <div id="circular"></div>
  15. </body>

生成圆角矩形

让 border-radius 的值为矩形高度的一半即可

  1. <head>
  2.     <title>圆角矩形</title>
  3.     <style>
  4.         #d2 {
  5.             width: 300px;
  6.             height: 200px;
  7.             border: 2px solid red;
  8.             border-radius: 100px;
  9.         }
  10.     </style>
  11. </head>
  13. <body>
  14.     <div id="d2"></div>
  15. </body>

展开写法

border-radius 是一个复合写法，实际上可以针对四个角分别设置
border-radius:2em;
.
等价于
.
左上→右上→右下→左下
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
.
border-radius: 10px 20px 30px 40px;

块级元素 & 行内元素

块级元素

常见元素:
h1 - h6
p
div
ul
ol
li
…

特点:

  • 独占一行
  • 高度, 宽度, 内外边距, 行高都可以控制.
  • 宽度默认是父级元素宽度的 100% (和父元素一样宽)
  • 是一个容器(盒子), 里面可以放行内和块级元素

注意:

  • 文字类的元素内不能使用块级元素
  • p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div

行内元素
常见元素:
a
strong
b
em
i
del
s
ins
u
span
…

特点:

  • 不独占一行，一行可以显示多个
  • 设置高度，宽度，高无效
  • 左右外边距有效(上下无效). 内边距有效.
  • 默认宽度就是本身的内容
  • 行内元素只能容纳文本和其他行内元素，能放块级元素

注意:

  • a 标签中不能再放 a 标签 (虽然 chrome 不报错，但是最好不要这么做).
  • a 标签里可以放块级元素，但是更建议先把 a 转换成块级元素

二者区别

①块级元素独占一行, 行内元素不独占一行
②块级元素可以设置宽高, 行内元素不能设置宽高.
③块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://xhuahua.blog.csdn.net/article/details/122411212

内容来源于网络，如有侵权，请联系作者删除！

Htmlcss前端javawebcss3css语法

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com