学习前端web的心路历程-----CSS页面美化和布局控制

本文主要是介绍学习前端web的心路历程-----CSS页面美化和布局控制,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

CSS页面美化和布局控制

  • 概念和好处
  • CSS使用
  • 语法和选择器
  • 属性

在这里插入图片描述

概念和好处

  1. 概念: Cascading Style Sheets 层叠样式表

    • 层叠:多个样式可以作用在同一个html的元素上,同时生效
  2. 好处

    1. 功能强大
    2. 将内容展示和样式控制分离
      • 降低耦合度。解耦
      • 让分工协作更容易
      • 提高开发效率

CSS使用

  1. CSS的使用:CSS与html结合方式

    1. 内联样式
      • 在标签内使用style属性指定css代码
      • 如:
        hello css
    2. 内部样式
      • 在head标签内,定义style标签,style标签的标签体内容就是css代码
      • 如:
            div{color:blue;}</style>
        div>hello css</div>
        
    3. 外部样式
      1. 定义css资源文件。
      2. 在head标签内,定义link标签,引入外部的资源文件
      • 如:
        • a.css文件:
          div{color:green;
          }			
          <link rel="stylesheet" href="css/a.css">
          <div>hello css</div>
          <div>hello css</div>
    • 注意:
      • 1,2,3种方式 css作用范围越来越大
      • 1方式不常用,后期常用2,3
      • 3种格式可以写为:
        <style>@import "css/a.css";
        </style>

语法和选择器

  1. css语法
    • 格式:
      选择器 {
      属性名1:属性值1;
      属性名2:属性值2;

      }
    • 选择器:筛选具有相似特征的元素
    • 注意:
      • 每一对属性需要使用;隔开,最后一对属性可以不加;
  2. 选择器:筛选具有相似特征的元素
    • 分类:
      1. 基础选择器
        1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
          • 语法:#id属性值{}
        2. 元素选择器:选择具有相同标签名称的元素
          • 语法: 标签名称{}
          • 注意:id选择器优先级高于元素选择器
        3. 类选择器:选择具有相同的class属性值的元素。
          • 语法:.class属性值{}
          • 注意:类选择器选择器优先级高于元素选择器
      2. 扩展选择器:
        1. 选择所有元素:

          • 语法: *{}
        2. 并集选择器:

          • 选择器1,选择器2{}
        3. 子选择器:筛选选择器1元素下的选择器2元素

          • 语法: 选择器1 选择器2{}
        4. 父选择器:筛选选择器2的父元素选择器1

          • 语法: 选择器1 > 选择器2{}
        5. 属性选择器:选择元素名称,属性名=属性值的元素

          • 语法: 元素名称[属性名=“属性值”]{}
        6. 伪类选择器:选择一些元素具有的状态

          • 语法: 元素:状态{}
          • 如:
            • 状态:
              • link:初始化的状态
              • visited:被访问过的状态
              • active:正在访问状态
              • hover:鼠标悬浮状态

属性

  1. 属性
    1. 字体、文本
      • font-size:字体大小
      • color:文本颜色
      • text-align:对其方式
      • line-height:行高
    2. 背景
      • background:
    3. 边框
      • border:设置边框,符合属性
    4. 尺寸
      • width:宽度
      • height:高度
    5. 盒子模型:控制布局
      • margin:外边距

      • padding:内边距

        • 默认情况下内边距会影响整个盒子的大小
        • box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
      • float:浮动

        • left
        • right

在这里插入图片描述

这篇关于学习前端web的心路历程-----CSS页面美化和布局控制的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/791744

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

Python异步编程中asyncio.gather的并发控制详解

《Python异步编程中asyncio.gather的并发控制详解》在Python异步编程生态中,asyncio.gather是并发任务调度的核心工具,本文将通过实际场景和代码示例,展示如何结合信号量... 目录一、asyncio.gather的原始行为解析二、信号量控制法:给并发装上"节流阀"三、进阶控制

使用DrissionPage控制360浏览器的完美解决方案

《使用DrissionPage控制360浏览器的完美解决方案》在网页自动化领域,经常遇到需要保持登录状态、保留Cookie等场景,今天要分享的方案可以完美解决这个问题:使用DrissionPage直接... 目录完整代码引言为什么要使用已有用户数据?核心代码实现1. 导入必要模块2. 关键配置(重点!)3.