前端学习第三天-css基础

1. CSS简介

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

那么如何实现结构和样式的完全分离呢？

1.1 什么是CSS

简单来说，层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

1.2 CSS发展历史

  1. 1996年 CSS 1.0 规范面世，其中加入了字体、样色等相关属性。

  2. 1998年 CSS 2.0 规范推出，这个版本的 CSS 也是最广为人知的一个版本。

  3. 2004年 CSS 2.1 规范推出，对 CSS 2.0 进行了一些小范围的修改，删除了一些浏览器支持不成熟的属性。

  4. 2010年 CSS 3.0 规范推出，将 CSS3 分成了不同的模块，例如盒子模型、背景和边框、文字特效等模块。

2. CSS使用方式(4种)

2.1 行内样式

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
    </head>
    <body>
        <p style="font-size: 16px; color: red;">大家好</p>
    </body>
</html>

行内样式需要写到标签的 style 属性值中。

2.2 内部样式表

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
        <style>
            p {
                font-size: 16px;
                color: red;
            }
        </style>
    </head>
    <body>
        <p>Hello everyone</p>
    </body>
</html>

内部样式需要写到 <style> 标签中。

2.3 外部样式表

  • 链接式

将样式写到单独的文件中，文件的扩展名为 .css。例如，index.css 文件中有如下样式：

p {
    font-size: 16px;
    color: red;
}

然后通过 <link> 元素将 index.css 文件引入到页面中：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
        <link rel="stylesheet" type="text/css" href="./css/index.css">
    </head>
    <body>
        <p>我是优秀的开发工程师</p>
    </body>
</html>

2.4 导入外部样式表

css文件中通过@import 引入其他css文件

@import url(global.css);

2.5css使用方式总结

  • 定义在外部文件（外链样式）：开发中主要是通过这种形式定义样式。（推荐）

  • 在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。

  • 在css文件导入外部样式表(导入样式)：通过import 引入其他css文件。

  • 定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。（不推荐）

    3. CSS基本语法

    CSS 样式由一系列的规则集组成，规则集中有一条或多条样式声明。

  • 选择器通常是您需要改变样式的 HTML 元素。

  • 每条样式声明包含着一对属性名和属性值。

  • 属性名和属性值之间以冒号（:）隔开。

  • 样式规则之间以分号（;）隔开。

4. CSS字体样式属性

4.1 font-size:字号大小

font-size属性用于设置字号。推荐使用像素单位px。

4.1.1 px

  • px单位名称为像素，像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。

  • 一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。

  • 大多数浏览器的默认字体大小是16px。

4.1.2 em

em是相对字体长度单位。如果用于font-size属性本身，则是相对于父元素的font-size。

em单位有如下特点：

  • em的值并不是固定的;

  • em会继承父级元素的字体大小。

4.2 font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{ 
    font-family:"Times New Roman",微软雅黑;
}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

注意:

  1. 现在网页中普遍使用16px、字体是微软雅黑。

  2. 各种字体之间必须使用英文状态下的逗号隔开。

  3. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。

  4. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

4.3 font-weight:字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用css 来实现。

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

属性值描述
normal默认值。定义标准的字符。
bold定义粗体字符。
bolder定义更粗的字符。
lighter定义更细的字符。
100~900定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。

4.4 font-style:字体风格

字体倾斜除了用 i 和 em 标签之外，可以使用css 来实现，但是css 是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

注意:

平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

4.5 font:综合设置字体样式 (重点)

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{
    font: font-style  font-weight  font-size  font-family;
}

注意：

1.使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

2.其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

5. CSS注释

CSS规则是使用 /* 需要注释的内容 */ 进行注释的。

p{
  font-size: 14px;                 /* 所有的字体是14像素大小*/
  }

6. 选择器

6.1 基本选择器（重点）

6.1.1 标签选择器

p {
    font-size: 16px;
    color: red;
}

选择页面中所有的 <p> 元素，给它们设置字体大小和颜色。

6.1.2 Class 选择器

.box {
    font-size: 20px;
    color: green;
}

选择页面中 class 属性值中包含 box 类名的所有元素，给它们设置字体大小和颜色。

6.1.3 ID 选择器

#nav {
    font-size: 24px;
    color: blue;
}

选择页面中 id 属性值是 nav 的元素，给它设置字体大小和颜色。

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。 类选择器（class） 好比人的名字， 是可以多次重复使用的。 id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

6.1.4 通配符选择器

* {
    font-size: 24px;
    color: blue;
}

6.1.5 总结-CSS的基本选择器

  • 标签选择器：针对一类标签

  • ID选择器：针对某一个特定的标签使用

  • 类选择器：针对你想要的所有标签使用

  • 通用选择器（通配符）：针对所有的标签都适用（不建议使用）

6.2伪类选择器(重点)

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果等。

为了和我们刚才学的类选择器相区别，类选择器是一个点比如 .demo {} 而我们的伪类选择器用 2个点 就是冒号比如 :link{}

6.2.1 链接伪类选择器

/* 未访问的链接 */
:link   
 /* 已访问的链接 */
:visited 
/* 鼠标移动到链接上 */
:hover
/* 选定的链接 */
:active

注意:

  • a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！

  • a:active 必须位于 a:hover 之后，这样才能生效！

  • a:link会对拥有a标签的属性href=""，即拥有实际链接地址的a对象发生效果

7. CSS外观属性

7.1 color：文本颜色

属性名color
属性值预定义的颜色名 | 十六进制值的颜色值 | RGB颜色值
默认值在不同浏览器中，默认值可能不同，但是在大部分浏览器中默认值为黑色。
描述设置文本的颜色

注意:

1.一般情况下颜色我们喜欢小写字母 比如 #ff0000。

2.css颜色简写比如 #ff0000 可以简写为#f00， #ff00ff 简写为 #f0f。

7.2 颜色半透明(css3)

文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：

/* a 是alpha透明的意思,取值范围 0~1之间  */
color: rgba(r,g,b,a)    
color: rgba(0,0,0,0.3)

7.3 line-height：行间距

行高是指文本行基线间的垂直距离:基线与基线之间的距离。

属性名line-height
属性值normal |数字 | 长度值 | 百分比
默认值normal
描述设置文本的行高

  • normal：默认值，行高由浏览器自动处理。

  • 数字：行高 = 数字 * 字体大小，例如，line-height: 2;font-size: 16px;，则行高等于：2 * 16px = 32px

  • 长度值：使用长度值设置行高，例如，line-height: 32px。

基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。

一般项目中的页面的行高设置比字号大7~8像素左右就可以了, 比如当前使用14像素的字号，行高设为24像素左右合适。

7.4 text-align：水平对齐方式

属性名text-align
属性值left | right | center | justify
默认值如果文本方向为ltr，则默认值为left；如果文本方向为rtl，则默认值为right
描述设置文本在水平方向上的对齐方式

  • left：内容左对齐。

  • center：内容居中对齐。（重点）

  • right：内容右对齐。

  • justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。

7.5 text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

7.6 text-decoration：文本修饰

文本修饰

属性名text-decoration
属性值none | underline | overline | line-through
默认值none
描述对文本进行修饰

  • none：指定文字无装饰

  • underline：指定文字的装饰是下划线

  • overline：指定文字的装饰是上划线

  • line-through：指定文字的装饰是贯穿线

7.7 letter-spacing：字符间距

字符间距

属性名letter-spacing
属性值normal | 长度值
默认值normal
描述增加或减少字符间的空白（字符间距）

  • normal：默认间隔

  • 长度值：用长度值指定间隔。可以为负值。

7.8 word-spacing（单词）

单词间距

属性名word-spacing
属性值normal | length
默认值normal
描述增加或减少单词间的空白(即字间隔)

  • normal：默认间隔

  • length：用长度值指定间隔。可以为负值。

7.9 文字阴影(CSS3)

可以给文字添加阴影效果

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

值描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊的距离。
color可选。阴影的颜色。

  • 前两项是必须写的。 后两项可以选写。

  • /* 多重阴影 */
text-shadow: -5px 0px cyan, 5px 0px red;

8. CSS书写规范

开始就形成良好的书写规范，是你专业化的开始。

8.1 标识符规范

【建议】小写。

示例：

/* good */
.username{
   color:red;
}
​
/* bad */
.USERNAME{
   COLOR:RED;
}

8.2 属性规范

【强制】 属性定义必须另起一行。

示例：

/* good */
.selector{
    margin: 0;
    padding: 0;
}
​
/* bad */
.selector { margin: 0; padding: 0; }

【强制】 属性定义后必须以分号结尾。

示例：

/* good */
.selector {
    margin: 0;
}
​
/* bad */
.selector {
    margin: 0
}

9.开发者工具（chrome）

此工具是我们的必备工具，以后代码出了问题，我们首先就是：

“按F12”或者是 “shift+ctrl+i” 打开开发者工具。

  1. ctrl+滚轮可以放大开发者工具代码大小。

  2. 左边是HTML元素结构 右边是CSS样式。

  3. 右边CSS样式可以改动数值和颜色查看更改后效果。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

消息队列+更新DB极易引发的DB并发修改bug

消息队列+更新DB极易引发的DB并发修改bug

背景 我们在生产系统中和其他系统进行交互时一般都会通过消息队列来解耦生产者和消费者&#xff0c;然后通过每个使用方消费消息队列的消息的方式来完成消息的消费&#xff0c;并且一般来说我们消费消息后极有可能会操作DB&#xff0c;不过这种方式如果处理不够仔细&#xff0…
阅读更多...
YOLOv9改进|加入AKConv模块！

YOLOv9改进|加入AKConv模块！

专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;主力高效涨点&#xff01;&#xff01;&#xff01; 一、改进点介绍 AKConv是一种具有任意数量的参数和任意采样形状的可变卷积核&#xff0c;对不规则特征有更好的提取效果。 论文速览&#xff1a;&am…
阅读更多...
44岁香港乐队主唱无惧身份悬殊娶「十亿千金」，乐队因欠沟通解散

44岁香港乐队主唱无惧身份悬殊娶「十亿千金」，乐队因欠沟通解散

「豪门驸马」这个头衔听起来似乎是「人生赢家」&#xff0c;可其中无非就是想内涵女强男弱&#xff0c;靠老婆之类的意思&#xff0c;所以大部分男艺人都很排斥。 香港知名乐队Mr. 的主唱布志纶(Alan) 自从2014年娶了「玩具大王」千金陈雪莹后&#xff0c;也被外界封为「十亿驸…
阅读更多...
H12-821_98

H12-821_98

98.如图所示的广播网络中&#xff0c;OSPF运行在四台路由器上&#xff0c;且在同一区域和同一网段。OSPF会自动选举一个DR和一个BDR,其余的两台路由器会成为DRother,从而达到更好的备份效果。 A.对 B.错 答案&#xff1a;A 注释&#xff1a; 这道题需要注意的是&#xff0c;在…
阅读更多...
Jupyter Notebook的安装和使用(windows环境)

Jupyter Notebook的安装和使用(windows环境)

一、jupyter notebook 安装 前提条件&#xff1a;安装python环境 安装python环境步骤&#xff1a; 1.下载官方python解释器 2.安装python 3.命令行窗口敲击命令pip install jupyter 4.安装jupyter之后&#xff0c;直接启动命令jupyter notebook,在默认浏览器中打开jupyte…
阅读更多...
vulhub中Aapache Tomcat AJP 文件包含漏洞复现（CVE-2020-1938）

vulhub中Aapache Tomcat AJP 文件包含漏洞复现（CVE-2020-1938）

查看tomcat默认页面&#xff0c;此时通过AJP协议的8009端口亦可访问Tomcat。 利用如下工具均可测试漏洞&#xff1a; https://github.com/YDHCUI/CNVD-2020-10487-Tomcat-Ajp-lfi 工具需要用到python2&#xff0c; 如果需要进一步利用需要向服务器的/webapps/ROOT目录下上传…
阅读更多...
续上一篇---Jetson Xavier NX 开发板Yolov4 环境搭建和摄像头实时检测教程

续上一篇---Jetson Xavier NX 开发板Yolov4 环境搭建和摄像头实时检测教程

1.已成功安装完CUDA&#xff0c;OpenCV&#xff0c;cuDNN&#xff0c;配置如下&#xff1a; 2.下载yolov4 自行去GitHub下载&#xff0c;然后再导入NX中&#xff0c;这样比较快且不容易出错。 https://github.com/AlexeyAB/darknet.git 3.配置 下载好包后解压缩&#xff0c;进…
阅读更多...
性能优化篇(四) GPU Instancing

性能优化篇(四) GPU Instancing

使用GPU Instancing可以在一个Draw Call中同时渲染多个相同或类似的物体&#xff0c;从而减少CPU和GPU的开销。 官方文档&#xff1a;https://docs.unity3d.com/Manual/GPUInstancing.html 启用GPU Instancing&#xff0c;我们可以选中一个材质&#xff0c;然后在Inspector窗口…
阅读更多...
云天励飞战略投资神州云海，布局机器人市场

云天励飞战略投资神州云海，布局机器人市场

日前,AI上市企业云天励飞(688343.SH)完成了对深圳市神州云海智能科技有限公司(以下简称“神州云海”)的B轮战略投资。 公开资料显示,自2015年于深圳创立以来,神州云海始终聚焦人工智能与服务机器人广阔的应用市场,依托自主的核心算法能力,深耕机器人硬件本体研发,整合上下游产…
阅读更多...
Java 学习和实践笔记（26）：组合（component）的含义以及与继承（extends)的关系

Java 学习和实践笔记（26）：组合（component）的含义以及与继承（extends)的关系

组合的两个作用&#xff1a; 1&#xff09;通过将父类对象作为子类的属性 2&#xff09;通过第1点的作用&#xff0c;实现了代码复用。 示例代码&#xff1a; public class TestComponent {public static void main(String[] args) {Student2 s1 new Student2("jason&…
阅读更多...
Zookeeper4：Java客户端、应用场景以及实现、第三方客户端curator工具包

Zookeeper4：Java客户端、应用场景以及实现、第三方客户端curator工具包

文章目录 Java连接Zookeeper服务端依赖代码使用 应用场景统一命名服务统一配置管理统一集群管理服务器节点动态上下线理解实现模拟服务提供者【客户端代码】-注册服务模拟服务消费者【客户端代码】-获取服务信息进行请求消费 软负载均衡分布式锁理解实现 生产集群安装N台机器合…
阅读更多...
【CV论文精读】【语义分割】【FCN】Fully Convolutional Networks for Semantic Segmentation

【CV论文精读】【语义分割】【FCN】Fully Convolutional Networks for Semantic Segmentation

FCN–Fully Convolutional Networks for Semantic Segmentation 用于语义分割的全卷积网络 建议参考这篇博客阅读论文 FCN网络解析 0.论文摘要和作者信息 摘要 卷积网络是强大的可视化模型&#xff0c;可以产生特征层次。我们表明&#xff0c;卷积网络本身&#xff0c;经过端…
阅读更多...
springboot220基于SpringBoot+Vue的周边游平台个人管理模块的设计与实现

springboot220基于SpringBoot+Vue的周边游平台个人管理模块的设计与实现

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考。 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项目编号&…
阅读更多...
nginx-1.24编译安装

nginx-1.24编译安装

1.创建压缩包存放路径 [rootlocalhost /]# mkdir -p /apps/scripts [rootlocalhost /]# cd apps/scripts/2.上传所需文件 3.初始化环境 [rootlocalhost scripts]# yum install -y yum-utils device-mapper-persistent-data lvm2 wget net-tools nfs-utils lrzsz gcc gcc-c …
阅读更多...
Softmax 回归 + 损失函数 + 图片分类数据集【动手学深度学习v2】李沐动手学深度学习课程笔记

Softmax 回归 + 损失函数 + 图片分类数据集【动手学深度学习v2】李沐动手学深度学习课程笔记

目录 Softmax回归 损失函数 图片分类数据集 Softmax回归从零开始实现 Softmax回归简洁实现 Softmax回归 回归和分类的区别 回归问题举例上节课的预测房价问题&#xff0c;分类问题就是对样本进行分类 回归和分类的具体区别 假设真实的类别为第i个类别&#xff08;值为1&#x…
阅读更多...
springcloud项目，无法在Sentinel Dashboard查看到服务的访问监控信息【解决方法】

springcloud项目，无法在Sentinel Dashboard查看到服务的访问监控信息【解决方法】

1.问题场景 因为warehouse子项目的前端未开发&#xff0c;所以只能通过postman测试接口访问&#xff1b; 2.解决方法 package org.sharetek.common.security.config;import cn.dev33.satoken.SaManager; import cn.dev33.satoken.filter.SaServletFilter; import cn.dev33.sat…
阅读更多...
ESP32 web 对接华为云平台--MQTT协议

ESP32 web 对接华为云平台--MQTT协议

文章目录 前言一、MQTT协议二、如何使用MQTT协议对接华为云1.注册华为云账号2.设备接入中创建资源空间3.如何连接4.通过MQTT.fx工具做初步对接4.1 设置连接信息4.2 连接平台 5.查看平台设备信息 三. 设备测对接平台1.ESP测引入MQTT库2.编码2.1前端编码修改2.2 后端接口修改 3.M…
阅读更多...
如何解决iQOO手机运行uniapp真机调试时无法识别的问题

如何解决iQOO手机运行uniapp真机调试时无法识别的问题

打开开发者选项&#xff0c;打开USB设置&#xff0c;把默认USB选项改成MIDI模式&#xff0c;就可以检测到手机了
阅读更多...
界面控件DevExpress .NET MAUI v23.2新版亮点 - 拥有全新的彩色主题

界面控件DevExpress .NET MAUI v23.2新版亮点 - 拥有全新的彩色主题

DevExpress拥有.NET开发需要的所有平台控件&#xff0c;包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。屡获大奖的软件开发平台DevExpress 今年第一个重要版本v23.1正式发布&#xff0c;该版本拥有众多…
阅读更多...
Vue.js的双向绑定原理

Vue.js的双向绑定原理

Vue的双向绑定 vue双向绑定是其最重要的核心亮点&#xff0c;其原理也很简单&#xff0c;这里做个简单总结 vue2的双向绑定是利用的Object.definePropertyvue3的双向绑定是利用的 ES6Porxy中的defineProperty(target, propKey, propDesc 其作用类似于Object.defineProperty …
阅读更多...
最新文章

Copyright @ 2022~2023