首页 > 其他分享 >初入前端-CSS(1)

初入前端-CSS(1)

时间:2023-06-29 16:57:06浏览次数:45  
标签:示例 样式 前端 元素 初入 字体 设置 CSS

CSS

CSS介绍

CSS (Cascading Style Sheets) 是一种用于描述网页样式和布局的样式表语言。它与 HTML 配合使用,用于控制网页中元素的外观和排版。

CSS 样式由选择器和声明块组成。选择器指定要应用样式的 HTML 元素,而声明块包含一个或多个属性-值对,定义元素的样式。下面是一个基本的 CSS 示例:

/* 选择器 */
h1 {
    color: blue;
    font-size: 24px;
}

/* 声明块 */
p {
    color: #333333;
    font-family: Arial, sans-serif;
}

在上面的示例中,h1 选择器选择所有的 <h1> 元素,并为其设置蓝色的文本颜色和 24 像素的字体大小。p 选择器选择所有的 <p> 元素,并为其设置颜色为 #333333(深灰色)和字体为 Arial。

CSS 样式可以应用于 HTML 页面中的元素,可以使用内联样式、嵌入样式和外部样式表三种方式来定义和应用 CSS。

  • 内联样式:直接在 HTML 元素的 style 属性中定义样式,例如 <h1 style="color: red;">标题</h1>
  • 嵌入样式:在 HTML 页面的 <head> 元素中使用 <style> 标签定义样式,例如:
<head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
  • 外部样式表:将 CSS 样式定义在一个独立的 .css 文件中,然后在 HTML 页面中使用 <link> 标签引入样式表,例如:
<head>
    <link rel="stylesheet" href="styles.css">
</head>

在 styles.css 文件中定义样式:

h1 {
    color: red;
}

使用 CSS,可以改变元素的颜色、字体、大小、边距、背景等属性,以及应用动画和过渡效果,实现丰富的网页设计和交互效果。

常见css设置

字体设置

设置字体样式和字体系列时,CSS提供了多个属性和值,以下是一个生成代码实例和相关讲解:

/* 设置字体样式和字体系列 */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  line-height: 1.5;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 2px;
}

上述代码示例中,我们设置了一些常见的字体属性和值,让我们逐个进行讲解:

  1. font-family:用于设置字体系列,即指定要在元素中使用的字体。在示例中,我们设置为Arial, sans-serif,这意味着首选字体为Arial,如果不可用,则使用sans-serif作为回退字体。

  2. font-size:用于设置字体大小。在示例中,我们设置为16px,表示字体大小为16像素。chrome默认字体16px,最小字体12px

  3. font-weight:用于设置字体粗细。在示例中,我们设置为bold,表示使用粗体字体。

  4. font-style:用于设置字体样式。在示例中,我们设置为italic,表示使用斜体字体。

  5. line-height:用于设置行高,即每行文字的高度。在示例中,我们设置为1.5,表示行高为字体大小的1.5倍。

  6. text-decoration:用于设置文本修饰,如下划线、删除线等。在示例中,我们设置为underline,表示给文本添加下划线。

  7. text-transform:用于控制文本转换,如大写、小写或首字母大写等。在示例中,我们设置为uppercase,表示将文本转换为大写形式。

  8. letter-spacing:用于设置字母间距。在示例中,我们设置为2px,表示字母之间的间距为2像素。

这些属性和值是设置字体样式的常见选项,你可以根据需要进行调整和组合,以达到所需的字体效果。将上述代码应用到适当的HTML元素上,即可改变该元素中文本的字体样式。

背景设置

设置背景样式时,CSS提供了多个属性和值,以下是一个生成代码实例和相关讲解:

/* 设置背景样式 */
body {
  background-color: #f2f2f2;
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

上述代码示例中,我们设置了一些常见的背景属性和值,让我们逐个进行讲解:

  1. background-color:用于设置背景颜色。在示例中,我们设置为#f2f2f2,表示背景颜色为淡灰色。

  2. background-image:用于设置背景图像。在示例中,我们设置为url("background.jpg"),表示使用名为"background.jpg"的图像作为背景图像。

  3. background-repeat:用于控制背景图像的重复方式。在示例中,我们设置为no-repeat,表示不重复背景图像。

  4. background-position:用于设置背景图像的位置。在示例中,我们设置为center,表示将背景图像居中放置。

  5. background-size:用于控制背景图像的尺寸。在示例中,我们设置为cover,表示使背景图像完全覆盖背景区域,可能会被裁剪或拉伸以适应。

这些属性和值是设置背景样式的常见选项,你可以根据需要进行调整和组合,以达到所需的背景效果。将上述代码应用到适当的HTML元素上,即可改变该元素的背景样式。

行块属性

CSS中的display属性可以用来控制元素的显示方式,包括行内(inline)和块级(block)等。以下是一个生成代码的示例和详细介绍:

/* 设置行块属性 */
span {
  display: inline;
}

div {
  display: block;
}

上述代码示例中,我们分别将display属性应用于spandiv元素,来演示行内和块级元素的效果。

  1. display: inline;:这行代码设置span元素为行内元素。行内元素不会独占一行,它们会尽可能地与相邻的元素在同一行显示,不会有换行。常见的行内元素包括spanastrong等。

  2. display: block;:这行代码设置div元素为块级元素。块级元素会独占一行,每个块级元素都会另起一行显示。常见的块级元素包括divph1~h6等。

通过设置display属性,你可以控制元素是以行内还是块级的方式进行布局和显示。需要注意的是,并不是所有的元素都能使用这两个属性。有些元素本身就是固定的行内或块级元素,如span是行内元素,div是块级元素。而有些元素可以通过设置display属性来改变其默认行为。

另外,还有其他值可以用于display属性,例如:

  • display: inline-block;:将元素设置为行内块级元素,具有行内元素的特性(可以与相邻元素在同一行显示)和块级元素的特性(可以设置宽度、高度等)。
  • display: none;:将元素隐藏,不会在页面上显示,也不占据空间。
  • display: flex;:使用弹性盒子布局,可以实现灵活的元素排列和对齐。

这些是display属性的一些常见选项,你可以根据需要进行调整,以实现所需的布局和显示效果。

标签:示例,样式,前端,元素,初入,字体,设置,CSS
From: https://www.cnblogs.com/fx666/p/17514613.html

相关文章

  • 初入前端-CSS(2)
    盒模型盒模型(BoxModel)是CSS中用于布局和定位元素的基本概念之一。它描述了一个元素在页面中所占据的空间,并定义了元素的内容、内边距、边框和外边距之间的关系。盒模型由以下四个部分组成:内容区域(Content):指的是元素的实际内容,例如文本、图像等。内边距(Padding):内边距是围......
  • 带有 Spring Boot 后端的 Vue.js 前端
    概述在开始本教程中,先推荐1个SpringBoot+Vue前后端分离Java项目,本项目是一个大型互联网金融项目,采用SpringBoot,Dubbo微服务的架构,包括多个独立的微服务,micr-common个公共服务,micr-web服务,micr-database数据库服务,micr-pay支付服务,micr-task定时任务。前端技术栈:Vue,Java......
  • 通过CSS样式缩放图片导致图片模糊的解决方案
    在进行前端页面开发的过程中,通过使用CSS对图片进行等比例缩放,存在会使图片失真的情形。这种情况有点违反我们的通常认知,毕竟放大图片会使图片失真这很正常,但是缩小图片通常应该会使图片变清晰才对。目前我查找了很多资料都还没发现哪篇文章有深入分析其中的原理,姑且认为这是浏览器......
  • 前端面试真题-vue(一)
    1.说说对vue的理解 (1)vue.js是一种用于创建用户界面的渐进式的javascript框架 (2)也是用于创建单页面应用的web应用框架。 (3)vue的核心库只关心视图层,使得数据和视图的双向绑定变得快捷 (4)由于vue的核心库只关心视图层,所以不仅可以与其他库和现有项目整合,也可以添加更多的vue......
  • css实现空心三角形
    <divclass="triangle"></div>.triangle{width:0;height:0;border-style:solid;border-width:08px15px;border-color:transparenttransparent#568CFC;position:relative;}.triang......
  • CSS文字换行之word-wrap和word-break的区别
    CSS文字换行之word-wrap和word-break的区别word-wrap:break-word;word-break:break-all;这两种都可以,区别在于英文场景中,当一个英文单词的长度超过了父级容器长度时,word-wrap:break-word没什么用,word-break:break-all会强制换行,使单词断开。......
  • 前端Vue自定义简单通用省市区选择器picker地区选择器picker 收获地址界面模版
    前端Vue自定义简单通用省市区选择器picker地区选择器picker收获地址界面模版,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13266效果图如下:代码实现如下:cc-selectDity使用方法<!--省市区选择show:是否显示 @sureSelectArea:确认事件......
  • 自用gulp打包脚本,压缩html,压缩js,压缩css,压缩图片,功能齐全
    constgulp=require('gulp');constfs=require('fs');consthtmlmin=require('gulp-htmlmin');constuglify=require('gulp-uglify');constuglifyEs=require('uglify-es');constminifyCSS=require(......
  • 【前端可视化】Canvas 下载图片添加背景色因为缩放导致比例不同问题
    比例不同是因为缩放导致的,缩放导致绘图中心发生改变,我们需要把填充的背景色的范围扩大(根据缩放比例来),同时背景色要绘制在现有画布的后面,防止重叠遮挡。感觉一个小下载,需要注意的事项还是挺多的,记录下,希望能帮助到其他人,里面的一些API请参考MDN文档。下面的参考代码,自己根据......
  • 【面经】百度前端一面面经
    1.websocket转promisesend({type:'getUserInfo'}){type:'userInfo',payload:{}}constres=awaitgetMessage({type:'getUserInfo'},{type:'userInfo'});constws=window.ws;//ws.addEventListener('messag......