首页 > 其他分享 >【前端】CSS

【前端】CSS

时间：2024-11-22 22:18:42浏览次数：3  
标签：color 标签 前端 元素 样式 font 选择器 CSS

目录


一、CSS基本语法

css：层叠样式表 (Cascading Style Sheets)。CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。能够做到页面的样式和结构分离。

1.1 语法

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

  • 选择器决定针对谁修改。 (找谁)
  • 声明决定修改啥。(干啥)
  • 声明的属性是键值对。

格式：

标签名{
	CSS语句
}

注意事项：

CSS 要写到 style 标签中(也有其他写法)
style 标签可以放到页面任意位置. 一般放到 head 标签内.
CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换)。

1.2 CSS引入方式

1.2.1 内部样式表：

写在 style 标签中。 嵌入到 html 内部。一般是放到 head 标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>hello</p>
</body>
</html>

优缺点：

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

1.2.2 行内样式表

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

 <p  style = "color:green">hello</p>

优缺点：

缺点: 不能写太复杂的样式.
优点：这种写法优先级较高, 会覆盖其他的样式.

1.2.3 外部样式

这种最常用。
创建一个 css 文件。
使用 link 标签引入 css。

<link rel="stylesheet" href="[CSS文件路径]">

例子:

HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./stytle.css">
</head>
<body>
    <div>hello</div>
</body>
</html>
CSS文件：
div {
    color: red;
}

优缺点：

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

1.3 代码书写格式

样式格式：

p {
    color: red;
    font-size: 30px;
}
  1. 样式大小写：采用小写字母。
  2. 空格规范 ：
    冒号后面带空格；
    选择器和 { 之间也有一个空格。

二、选择器

选择器的种类：

  • 基础选择器: 单个选择器构成的
    • 标签选择器
    • 类选择器
    • id 选择器
    • 通配符选择器
  • 复合选择器: 把多种基础选择器综合运用起来.
    • 后代选择器
    • 子选择器
    • 并集选择器
    • 伪类选择器

2.1 基础选择器

2.1.1 标签选择器

标签选择器：

  • 能快速为同一类型的标签都选择出来.
  • 但是不能差异化选择
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: brown;
        }
        div {
            color: green;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>

    <div>hello1</div>
    <div>hello2</div>
    <div>hello3</div>
    <div>hello4</div>

</body>
</html>

2.1.2 类选择器

类选择器

  • 差异化表示不同的标签
  • 可以让多个标签的都使用同一个标签.

语法细节：

  • 类名用 . 开头的
  • 下方的标签使用 class 属性来调用.
  • 一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
  • 如果是长的类名, 可以使用 - 分割.
  • 不要使用纯数字, 或者中文, 以及标签名来命名类名。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .brown {
            color: brown;
        }
        div {
            color: green;
        }
    </style>
</head>
<body>
    <p class = 'brown'>p1</p>
    <p class = 'brown'>p2</p>
    <p>p3</p>
    <p class = 'brown'>p4</p>
    <p>p5</p>

    <div>hello1</div>
    <div class = 'brown'>hello2</div>
    <div class = 'brown'>hello3</div>
    <div>hello4</div>

</body>
</html>

2.1.3 id 选择器

id 选择器：
和类选择器类似.

  • CSS 中使用 # 开头表示 id 选择器
  • id 选择器的值和 html 中某个元素的 id 值相同
  • html 的元素 id 不必带 #
  • id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .brown {
            color: brown;
        }
        div {
            color: green;
        }
        #red {
            color: red;
        }
    </style>
</head>
<body>
    <p id = 'red'>p1</p>
    <p class = 'brown'>p2</p>
    <p>p3</p>
    <p class = 'brown'>p4</p>
    <p>p5</p>

    <div>hello1</div>
    <div id = 'red'>hello2</div>
    <div class = 'brown'>hello3</div>
    <div>hello4</div>

</body>
</html>

2.1.4 通配符选择器

通配符选择器：
使用 * 的定义, 选取所有的标签.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <p id = 'red'>p1</p>
    <p class = 'brown'>p2</p>
    <p>p3</p>
    <p class = 'brown'>p4</p>
    <p>p5</p>

    <div>hello1</div>
    <div id = 'red'>hello2</div>
    <div class = 'brown'>hello3</div>
    <div>hello4</div>

</body>
</html>

2.2 复合选择器

2.2.1 后代选择器

后代选择器 :
又叫包含选择器. 选择某个父元素中的某个子元素.

格式：

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

  • 元素 1 和 元素 2 要使用空格分割
  • 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol li {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <ol>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ol>
       
</body>
</html>

2.2.2 子选择器

子选择器：
与后代选择器类似，但是只能选择子标签。

格式：

元素1>元素2 {样式声明}

  • 使用大于号分割
  • 只选亲儿子，不选孙子元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cat>a {
            color: red;
        }
    </style>
</head>
<body>
    <div class="cat">
        <a href="#">小猫</a>
        <ul>
            <li><a href="#">小狗</a></li>
            <li><a href="#">小狗</a></li>
        </ul>
    </div>       
</body>
</html>

2.2.3 并集选择器

用于选择多组标签. (集体声明)

格式：

元素1, 元素2 { 样式声明 }

  • 通过 逗号 分割等多个元素.
  • 表示同时选中元素 1 和 元素 2
  • 任何基础选择器都可以使用并集选择器.
  • 并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)

2.3.4 伪类选择器

  1. 链接伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)

  1. :force 伪类选择器

选取获取焦点的 input 表单元素.

三、常用元素属性

参考文档：文档

3.1 字体属性

3.1.1 设置字体 font-family

  • 字体名称可以用中文, 但是不建议.
  • 多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
  • 如果字体名有空格, 使用引号包裹.
  • 建议使用常见字体, 否则兼容性不好.
body {
    font-family: '微软雅黑';
    font-family: 'Microsoft YaHei';
}

3.1.2 字体大小 font-size

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

3.1.3 字体粗细 font-weight

  • 可以使用数字表示粗细.
  • 700 == bold, 400 是不变粗, == normal
  • 取值范围是 100 -> 900
p {    
	font-weight: bold;
    font-weight: 700;
  }

3.1.4 文字样式 font-style

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

3.2 文本属性

3.2.1 文本颜色 color

RGB：我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.

计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色.

color 属性值的写法:

  • 预定义的颜色值(直接是单词)[最常用]
  • 十六进制形式
  • RGB 方式

3.2.2 文本对齐 text-align

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

3.2.3 文本装饰 text-decoration

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

3.2.4 文本缩进 text-indent

  • 单位可以使用 px 或者 em.
  • 使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
  • 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)

3.2.5 行高 line-height

行高: 指的是上下文本行之间的基线距离. 行高 = 上边距 + 下边距 + 字体大小

四、元素的显示模式

4.1 块级元素

h1 - h6
p
d
iv
ul
ol
li

特点：

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

4.2 行内元素/内联元素

a
strong
b
em
i
del
s
ins
u
span

特点：

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

标签：color,标签,前端,元素,样式,font,选择器,CSS
From： https://blog.csdn.net/yj20040627/article/details/143880603

相关文章

  • 前端样式设置
    背景相关的样式  backgroundbackground-color         背景颜色background-image    背景图片（默认为原始尺寸展示，重复填满元素）background-repeat    背景图片是否平铺 repeat（平铺）no-repeat（不平铺）background-size      调整背景图......
  • 毛玻璃 亚克力 风格效果 CSS 生成器
    使用https://glass.funprompts.top/ 创建令人惊叹的毛玻璃亚克力风格效果轻松设计半透明模糊卡片(支持中文)毛玻璃风格介绍毛玻璃亚克力设计是一种现代设计趋势,通过背景模糊、透明度和微妙的边框来创造磨砂玻璃效果.它在用户界面中创造深度和层次感,同时保持现代简洁的......
  • 前端开发调试之移动端调试学习笔记
    一、引言随着移动互联网的飞速发展，移动端页面和应用的开发变得越发重要。而在前端开发移动端项目时，有效的调试手段能帮助我们及时发现并解决诸多问题，确保项目在移动端设备上能够正常运行且提供良好的用户体验。以下就是关于前端开发中移动端调试的详细学习笔记内容。二、常......
  • 通过django渲染pyecharts图表到前端（超级详细，看一遍就懂）
    首先第一步，打开pycharm软件然后打开终端窗口在终端窗口中输入django-adminstartprojectpyecharts_django_demo，创建一个django文件然后再创建一个django应用程序，方便后面运行，在终端窗口输入：pythonmanage.pystartappdemo直接执行上面的命令会出现上面的问题，因为没有......
  • 【前端知识】前端组件-axios详细介绍
    Axios详细介绍安装基本使用发送POST请求使用请求配置拦截器取消请求Axios是一个基于Promise的HTTP客户端，用于浏览器和node.js。它提供了简单易用的API，可以在浏览器和Node.js环境中发送HTTP请求，并处理响应。Axios支持请求和响应的拦截器、自动转换JS......
  • 记录---前端中断请求的方式与原理
    ......
  • Java根据前端返回的字段名进行查询数据的方法
    在Java后端开发中，根据前端返回的字段名动态查询数据库是一种常见的需求。这种需求通常通过使用反射和动态SQL来实现。下面是一个完整的代码示例，它展示了如何根据前端返回的字段名动态查询数据库中的数据。一、根据前端返回的字段名动态查询数据库中的数据示例1.准备工作（1）数据库......
  • css笔记： 继承关系
    这两天写css的时候发现子元素继承了父元素的css样式，不显示它自己的。经过一番搜索，得出以下几个解决方案：检查选择器优先级增加样式的特异性避免不必要的继承使用!important标记（谨慎使用）检查CSS规则的顺序明确样式规则，减少对父元素的依赖考虑使用CSS变量理解CSS的层叠规则......
  • 前端超级好用的徽章生成网站shields的使用简介
    前端超级好用网站shields的使用简介在前端开发过程中，我们常常需要为项目添加各种标识和徽章来展示项目的状态、版本信息、依赖情况等。Shields.io这个网站提供了一个非常便捷的方式来生成各种漂亮且实用的徽章，以下是其详细的使用教程。一、基本徽章生成（一）通过URL参数生成......
  • Jquery与现代前端框架、库的集成
    目录React与jQuery集成Vue与jQuery集成Angular与jQuery集成在SPA应用中的角色与限制React与jQuery集成在React应用中集成jQuery是一个相对少见的选择，因为React本身提供了强大的虚拟DOM（VDOM）系统来管理UI状态和DOM操作，但某些情况下，利用jQuery的某些成熟功能（如特定的动画效......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99