CSS【基础】

目录

一、CSS的介绍

二、CSS语法规则

三、CSS引入方式

四、CSS的基础选择器

五、CSS属性:  字体font

六、CSS属性:文本text

七、CSS属性:颜色

八、样式层叠问题

九、谷歌浏览器的调试工具

十、拓展:标签(盒子)水平居中的方法


一、CSS的介绍

1.什么是CSS?

CSS是 层叠样式表(Cascading Style Sheets) 的缩写,是页面美化的一种编程语言

2.CSS作用是什么?

给页面中的HTML标签设置样式进行美化

二、CSS语法规则

1.CSS写在哪里?

CSS写在<style></style>标签中,或者CSS文件中,或者HTML的style属性里

2.CSS的书写格式(常用)

CSS选择器 {

CSS属性 : 属性值 ;

······

}

三、CSS引入方式

1.内嵌式

css写在style标签中,style标签一般写在head标签中,title标签下面

<!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>css初体验</p>
</body>
</html>

2.外联式

另创一个.css文件,专门写css,然后html文件引入css文件

然后通过link标签引入

<!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="css文件名.css"></link></head>
<body><p>css初体验</p>
</body>
</html>
p {color : red;
}

3.行内式

写在标签的style属性中

一般配合js使用

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

四、CSS的基础选择器

选择器的作用:选中页面中对应的标签(定位标签)

1.标签选择器

概念:标签选择器就是以标签名命名的选择器

结构:标签名 { }

作用:通过标签名选中页面中所有这类标签

2.类选择器

概念:类选择器就是以类名命名的选择器

结构:.类名 { }

作用:通过类名,选中页面中所有带有这个类名的标签

知识补充:类(class)

类(class)是html标签的一个属性,它的属性值是一个类名

相当于给这个标签起了一个名字

格式: class = "类名"

通常给css使用,用于做美化工作

温馨提示:·

1.由于是代表名字,所以不同标签类名可以相同

2.一个标签可以有多个名字,所以可以有多个类名

格式:class = "类名1 类名2"

3.类名要遵循标识符规则

3.id选择器

概念:id选择器就是以id名命名的选择器

结构:#id名 { }

作用:通过id名,找到页面中所有带有这个id名的标签,设置样式

知识补充: id

id是html标签的一个属性,它的属性值是id名

相当于给标签起了一个独一无二的id

格式:id = "id名"

通常给js使用,不做美化工作

温馨提示:·

1.由于是代表独一无二id,所以不同标签id名不可以相同

2.一个标签只可以有一个id

3.id名要遵循标识符规则

4.通配符选择器

概念:通配符选择器就全选选择器

格式:* { }

作用:找到页面中所有的标签,设置样式

常用来用来去除标签默认的margin和padding(后面学习)

五、CSS属性:字体font

1.字体样式

属性名: font-style

属性值:

正常:normal

倾斜:italic

* {font-style: normal;font-style: italic;
}

2.字体粗细

属性名: font-weight

属性值:

1.关键字

正常:normal

加粗:bold(bou的)

2.数字(常用)

正常:400

加粗:700

* {font-weight: normal;font-weight: bold;font-weight: 400;font-weight: 700;
}

3.字体大小

属性名: font-size

属性值:数字+px

注意:谷歌浏览器默认16px大小字体

* {font-size: 20px;
}

4.字体类型

属性名:font-family

属性值:具体字体1,具体字体2,具体字体3,······

具体字体例

微软雅黑、黑体、宋体、楷体·······

渲染规则:从左往右顺序查找电脑安装的字体

温馨提示:开发时,尽量选择系统常见自带的字体

* {font-family: 微软雅黑,黑体,宋体;
}

5.字体复合属性

属性名:font

属性值:style值 weight值 size值 family值

温馨提示:可以省略前两个,省略的为默认值,size/后面乘以对应的行高倍数来设置行高

* {font: italic 700 10px 宋体;font: 19px 微软雅黑;font: 16px/1.5 "Helvetica Neue", "Helvetica", "Arial", "Microsoft Yahei";
}

六、CSS属性:文本text

1.文本(首行)缩进

属性名:text-indent

属性值:

1.数字+px(需要参考font-size的px)

2.数字+em (推荐使用: 1em = 当前标签的font-size的大小)

* {text-indent: 50px;  如果font-size是50px则表示缩进1个字符text-indent: 2em;   缩进2个字符
}

2.文本水平对其方式

属性名:text-align

属性值:

左对齐:left

居中对其:center

右对齐:right

温馨提示:如果需要让文本(p\h\div)水平居中,text-align属性给文本所在标签设置

* {text-align: left;text-align: center;text-align: right;
}

3.text-align: center 还能能让哪些元素水平居中?

注意:如果需要让以下元素水平居中,需要给以上元素的父元素设置

  • input标签、span标签、img标签、a标签

<div><span>水平居中</span>  需要给div设置,给span设置无效果
</div>
<div class="gg"><div ckass="dd"><span>水平居中</span>  需要给gg和dd设置都可以,给span设置无效</div>
</div>

3.文本装饰

属性名:text-decoration

属性值

无装饰线:none

下划线:underline

删除线:line-through

温馨提示:开发中经常使用text-decoration: none 来清除a标签的下划线

* {text-decoration: none;text-decoration: underline;text-decoration: line-through;
}
​
a {text-decoration: none;
}

4.文本行高

属性名:line-height

属性值

1.数字+px

2.倍数(当前标签font-size的倍数)

温馨提示:行高一般用于让内容垂直居中,开发中可以使用line-height: 1 取消上下间距

行高

行高由上间距+文字高度+下间距组成

文字高度是保持不变的,在变的是上间距和下间距

* {line-height: 20px;line-height: 2;
}

七、CSS属性:颜色

1.字体颜色

属性名:color

2.背景颜色

属性名: background-color

3.两者的属性值

  • 颜色英文单词:red、blue、·····

  • rgb表示:rgb(数字,数字,数字)

  • rgba表示:gba(数字,数字,数字,不透明度数字) a表示透明度,数字在0-1范围内

  • 十六进制法:#十六进制数

温馨提示:开发中ui设计师会把颜色编号写在旁边,不需要我们去记忆

* {color: red;color: rgb(1,2,3);color: rgba(1,2,3,0.5);color: #0000;
​
}

八、样式层叠问题

问题:如果给同一个标签设置了相同的样式,此时浏览器如何渲染?

结果:覆盖,写在上面的被写在下面的样式覆盖,生效下面的

* {color: red;color: blue;
}
​
* {color: green;
}

九、谷歌浏览器的调试工具

1.排错

打开页面右击检查

看到elements这行,表示元素

左边表示html标签右边表示css样式

当出现css被划线了,代表该css未被使用

如果出现黄色三角,则代表该附近css语法错误

2.调试

样式那块区域打勾代表使用该样式,可以去掉打勾不使用该样式

也可以双击属性值,然后修改属性值

也可以双击属性值,然后按tab换行,换到最后一行可以添加css语句

这些操作都会使页面发生变化,有助于我们调试

温馨提示:这些调试修改的样式,是不会改变CSS的代码的,需要我们调试完对应样式后,进入到代码里面修改成需要的

十、拓展:标签(盒子)水平居中的方法

属性名:margin

属性值:0 auto

* {margin: 0 auto;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/111354.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

idgen导入Android11源码

文章目录 配置下载AS编译源码依赖导入玩一下andorid.iml 注意&#xff1a; 有些时候发现为啥自己编译就这么难呢&#xff1f;不是卡死就无数次重启虚拟机&#xff0c;一切的原罪在配置过低&#xff0c;换句话说就是穷。关于导入源码的下载参考 Android Studio for Platform (AS…

MAC如何在根目录创建文件

在这之前先明确一下啥是根目录。 打开终端&#xff0c;输入cd /&#xff0c;然后输入 ls 查看根目录下有哪些文件 可以看到 usr、etc、opt 这些文件的地方才叫根目录&#xff0c;而不是以用户命名&#xff0c;可以看到音乐、应用程序、影片、桌面的地方哈 介绍一种叫做软连接…

python字典

字典 字典定义创建字典 字典定义 字典是python语言中唯一的映射类型。这种映射类型由键&#xff08;key&#xff09;和值&#xff08;value&#xff09;组成&#xff0c;是“键值对”的无序可变序列 定义字典时&#xff0c;每个元组的键和值用冒号隔开&#xff0c;相邻元素用…

lspci源码

lspci 显示Linux系统的pci设备最简单的方法就是使用lspci命令&#xff0c;前提是要安装pciutils包&#xff08;centos在最小化安装时不会自带该包&#xff0c;需要自己下载安装&#xff09; pciutils包的源码github地址为&#xff1a; https://github.com/pciutils/pciutils …

Python数据挖掘实用案例——自动售货机销售数据分析与应用

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前学习C/C、算法、Python、Java等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL&…

【试题028】C语言关于逻辑与的短路例题

1.题目&#xff1a;设inta1,b;&#xff0c;执行b0&&(a);后&#xff0c;变量a的值是&#xff1f; 2.代码解析&#xff1a; #include <stdio.h> int main() {//设inta1,b;执行b0&&(a);后&#xff0c;变量a的值是?int a 1, b;printf("表达式的值是…

SQL 语法

SQL 语法规则 SQL语句总是以关键字开始&#xff0c;如SELECT、INSERT、UPDATE、DELETE、DROP、CREATE。SQL语句以分号结尾。SQL不区分大小写&#xff0c;意味着update与UPDATE相同。 数据库表 数据库通常包含一个或多个表。每个表都用一个名称标识&#xff08;例如&#xff0c;…

【ELK使用指南 2】常用的 Logstash filter 插件详解(附应用实例)

Logstash filter 一、logstash filter过滤插件的常用模块简介二、grok 正则捕获插件2.1 grok插件的作用2.2 内置正则表达式2.3 自定义正则表达式 三、mutate 数据修改插件3.1 mutate插件的作用3.2 常用的配置选项3.3 mutate插件应用实例 四、multiline 多行合并插件4.1 multili…

Mac上安装和配置Git

在Mac上安装和配置Git是一个相对简单的过程&#xff0c;以下是一份详细的步骤指南。 首先&#xff0c;你需要确保你的Mac已经安装了Homebrew&#xff08;如果还没有安装&#xff0c;可以通过以下命令安装&#xff1a;&#xff09;&#xff0c;Homebrew是一个包管理器&#xff…

Unity之ShaderGraph如何实现马赛克效果

前言 今天我们来实现一个马赛克的效果 如下所示&#xff1a; 关键节点 Posterize&#xff1a;色调分离节点 图像的色调分离或色调分离需要将色调的连续渐变转换为色调较少的几个区域&#xff0c;并从一种色调突然改变为另一种色调。 原理 原理就是通过色调分离节点&…

thinkphp队列的使用?

1.安装队列依赖 由于框架版本原因可以选择适合的版本 composer require topthink/think-queue 由于我是tp框架5.1的&#xff0c;所以选择了think-queue 1.1.6 composer require topthink/think-queue 1.1.6 判断安装成功 php think queue:work -h image.png 2.配置文件…

yolov5多个框重叠问题

NMS&#xff08;Non-Maximum Suppression&#xff0c;非极大值抑制&#xff09;是一种在计算机视觉和目标检测领域常用的技术。它通常用于在图像或视频中找出物体或目标的位置&#xff0c;并剔除重叠的边界框&#xff0c;以确保最终的检测结果准确且不重叠。 会出现多个框重叠…

阿里云-AnalyticDB【分析型数据库】总结介绍

一、背景 随着企业IT和互联网系统的发展&#xff0c;产生了越来越多的数据。数据量的积累带来了质的飞跃&#xff0c;使得数据应用从业务系统的一部分演变得愈发独立。物流、交通、新零售等越来越多的行业需要通过OLAP做到精细化运营&#xff0c;从而调控生产规则、运营效率、企…

互联网Java工程师面试题·Java 总结篇·第十弹

目录 82、JDBC 能否处理 Blob 和 Clob&#xff1f; 83、简述正则表达式及其用途。 84、Java 中是如何支持正则表达式操作的&#xff1f; 85、获得一个类的类对象有哪些方式&#xff1f; 86、如何通过反射创建对象&#xff1f; 87、如何通过反射获取和设置对象私有字段的值…

Unity之ShaderGraph如何实现无贴图水球效果

前言 我们今天来实现一个无贴图水球效果&#xff0c;如下图所示&#xff1a; 主要节点 UVSplit&#xff1a;可以获得UV在RGB三个颜色分别的分量 Remap&#xff1a;重映射节点 基于输入 In 值在输入In Min Max的 x 和 y 分量之间的线性插值&#xff0c;返回输入Out Min Max…

【发布】Photoshop ICO 文件格式插件 3.0

备注&#xff1a;本文原文首发于博客园&#xff1a; https://www.cnblogs.com/hoodlum1980/p/17766287.html 【简介】 Photoshop ICO 插件是为 Photoshop 开发的功能扩展插件&#xff0c;使得 Photoshop 可以直接读写 ICO 格式文件。由于 Photoshop 具有强大的像素位图编辑功…

android studio打开flutter项目报红

一、android studio打开flutter项目报红&#xff0c;如下图&#xff1a; 二、解决方法&#xff1a; 2.1 在这个build.gradle添加以下代码&#xff0c;如图&#xff1a; 2.2 在build.gradle最顶部添加如下代码&#xff1a; def localProperties new Properties() def localPr…

node 第八天 使用前后端不分离的方式实现cookie登录验证

实现cookie登录, 第一次登录成功后, cookie由服务端设置并保存在客户端, 后续访问在cookie过期前 (过期时间由后端设置) 将不需要登录cookie出现的背景是 HTTP是无连接的&#xff0c;无状态的, 半双工(http2.0以下), 所以需要一个媒介存在http中, 服务端可以操作, 客户端也可以…

使用Gitlab构建简单流水线CI/CD

什么是Gitlab Gitlab实质上是一套DevOps工具 目前看起来&#xff0c;Gitlab属于是内嵌了一套CI/CD的框架&#xff0c;并且可以提供软件开发中的版本管理、项目管理等等其他功能。 这里需要辨别一下Gitlab和Github Gitee的区别。 GIthub大家都很熟悉了&#xff0c;一般大家都会…

Mac苹果电脑开不了机怎么办,该怎么修复

台式机Mac或MacBook无法打开&#xff0c;或者可能无法通过Apple图标启动&#xff1f;不用担心&#xff0c;虽然会让人烦躁不安&#xff0c;但通常是可以修复的。 以下就是重新启动Mac所需的所有步骤。只需按顺序进行操作即可&#xff0c;除非操作系统更新失败后Mac无法启动。在…