CSS的基本用法

作者:神秘网友 发布时间:2021-03-11 14:50:07

CSS的基本用法

转:

CSS的基本用法

**CSS的基本用法

css样式

样式是css最小单元语法,每个样式包括两部分内容:选择器和声明。

  • 选择器(Selector):选择器告诉浏览器该样式将作用于页面中的哪些对象,这些对象可以是某个标签、所有网页对象、指定class或ID值等。浏览器在解析这个样式时,根据选择器来渲染对象显示效果。
  • 声明(Declaration):声明可以有一个或无数个,这些声明命令浏览器如何去渲染选择器指定的对象。声明必须包括两个部分:属性和属性值,并用分号来标识一个声明的结束,在一个样式中最后一个声明可以省略分号。所有声明放在一对大括号里面。
  • 属性(Property):属性是css提供的设置好的样式选项。属性名是一个单词或多个单词组成,单词之间通过连字符相连。
  • 属性值(Value):属性值是用来显示属性效果的参数。她包括数值和单位,或者关键字。

任何语言都需要注释,HTML使用“ ”,而css使用“/注释语句/”。

body{/*页面基本属性*/
     font-size:12px;
     color:#CCCCCC;
}
/*段落基本属性*/
p{background-color:#FF00FF;}

css的应用

css样式代码必须保存在.css类型的文本文件中,或者放在网页内

  1. 行内样式
    行内样式就是把css样式直接放在代码的行内标签中,一般放在标签的style属性中,由于行内样式直接插入标签中,是最直接的方式,但是修改不易。

html lang="en"
head
    meta charset="UTF-8"
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    titleDocumenttitle
head
body
    p style="background-color: rgb(37, 206, 228);"行内元素,控制段落1p
    h2 style="background-color: pink;"行内元素,h2标题h2
    p2 style="background-color:rgb(37, 206, 228);"行内元素,控制段落2p2
body
html


2个p标签虽然内容不同,但是使用一样的背景色,但添加2次行内属性设置背景色,若后期修改是,需打开页面一个个修改,而且添加这么多行内样式,页面面积大,还会浪费服务器宽带和流量。

  1. 内嵌式
    内嵌式通过将css写在网页源文件的头部,在和之间,该样式只能在此页使用,解决行内式多次书写的弊端。

html lang="en"
head
    meta charset="UTF-8"
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    titleDocumenttitle
    style type="text/css"
    p{
        text-align: left;
        font-size: 16px;
        margin: auto;
        margin-bottom: 20px;
        text-indent: 2em;
    }
    style
head
body
    p《唐人街探案3》是由万达影视传媒有限公司、北京壹同传奇影视文化有限公司出品,陈思诚执导,王宝强、刘昊然领衔主演的悬疑推理喜剧片。p
    P该片讲述了“曼谷夺金杀人案”“纽约五行连环杀人案”后,“唐人街神探组合”唐仁,秦风被野田昊请到东京,调查一桩离奇的谋杀案的故事 。p
    p该片将于2021年2月12日在中国大陆上映 。p
body
html


在这个例子中统一设置了p标签的属性,节约空间,减少代码量,也方便了修改。

  1. 链接式
    链接式通过html的标签,将外部的样式文件链接到HTML的文档中,这是网络上网站最常用的方式,也最实用。这个方法将HTML和css完全分离。

html lang="en"
head
    meta charset="UTF-8"
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    titleDocumenttitle
    link href="1.css" type="text/css" rel="stylesheet"
head
body
    p《唐人街探案3》是由万达影视传媒有限公司、北京壹同传奇影视文化有限公司出品,陈思诚执导,王宝强、刘昊然领衔主演的悬疑推理喜剧片。p
    P该片讲述了“曼谷夺金杀人案”“纽约五行连环杀人案”后,“唐人街神探组合”唐仁,秦风被野田昊请到东京,调查一桩离奇的谋杀案的故事 。p
    p该片将于2021年2月12日在中国大陆上映 。p
body
html
p{
    background: aliceblue;
    font-size: 18px;
    border-bottom: 3px dashed #18ebe0;
}


链接式样式使css代码和HTML代码完全分离,实现结构和样式的分开,使HTML代码专门构建页面结构,而css负责美化工作。

css文件可以放在不同的html文件中,使网站所有页面样式统一,同时便于管理和修改,减少代码及维护时间。

初学过程中,我经常将行内样式和内嵌式混合使用,不美观也不简洁,需要多操作,养成书写代码的好习惯。
总结行内样式最直接,但是代码多,浪费服务器;
内嵌式解决多次书写,但是只能在当前页面使用;
链接式使用最广泛,可以统一修改属性值,可在多个页面中使用。

转:

CSS的基本用法


本文章教程介绍完毕,更多请访问跳墙网其他文章教程!

CSS的基本用法 相关文章

  1. npm基本使用

    1. package.json文件 作用:保存当前项目所使用的模块信息,作为包描述文件,当node_modules丢失的时候,可以通过package.json文件快速恢复项目所使用的包 创建:通过npm init自动初始化 E:\前端\nodejs\实践npm initThis utility will walk you through cre

  2. app渗透测试 服务端篇

    基本知识 平时安装的应用位置,里面主要是odex可运行文件 /data/app 系统应用位置(需要root权限),里面主要是odex可运行文件 /system/app 应用的数据相关的位置,里面包含一些配置,缓存信息 /data/data 重打包测试测试 测试流程 检测app是否检测签名,如果

  3. Shell编程中变量用法

    1. 变量替换 语法 说明 ${变量名#匹配规则} 从变量开头进行规则匹配,将符合最短的数据删除 ${变量名##匹配规则} 从变量开头进行规则匹配,将符合最长的数据删除,贪婪匹配 ${变量名%匹配规则} 从变量尾部进行规则匹配,将符合最短的数据删除 ${变量名%%匹配

  4. NSQ(1)-基本介绍

    nsq 介绍 NSQ是一个基于Go语言的分布式实时消息平台,它基于MIT开源协议发布,由bitly公司开源出来的一款简单易用的消息中间件。 NSQ可用于大规模系统中的实时消息服务,并且每天能够处理数亿级别的消息,其设计目标是为在分布式环境下运行的去中心化服务提

  5. element 树形 el-tree 修改小三角箭头图标CSS

    可根据需要添加/deep/ ::v-deep 等权重 .el-tree .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg);}.el-tree .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate

  6. 227. 基本计算器 II

    题目: 给你一个字符串表达式 s ,请你实现一个基本计算器来计算并返回它的值。整数除法仅保留整数部分。 示例 1: 输入:s = "3+2*2" 输出:7 示例 2: 输入:s = " 3/2 " 输出:1 示例 3: 输入:s = " 3+5 / 2 " 输出:5 class Solution {public: int cal

  7. 【LeetCode-772】基本计算器 III

    问题 实现一个基本的计算器来计算简单的表达式字符串(带括号的四则运算)。 表达式字符串只包含非负整数,算符 +、-、*、/ ,左括号 ( 和右括号 ) 。整数除法需要 向下截断 。 你可以假定给定的表达式总是有效的。 示例 输入:s = "2*( - 5+5*2)/ 3+(6/2+8)

  8. Git基本操作之查看提交日志、查看修改内容

    继续记录和整理Git相关的指令,前面介绍过的内容链接如下: 《Git 基本操作之简明指南》https://www.cnblogs.com/phillee/p/14516406.html 《Git基本操作之远程仓库下载与保存、本地仓库初始化并推送》https://www.cnblogs.com/phillee/p/10610687.html 《Ub

  9. While循环

    结构 while是最基本的循环,它的结构为: while(布尔表达式){ //循环内容} 只要布尔表达式为true,循环就会一直执行下去。 我们大多数情况是会让循环停下来的,我们需要一个让表达式失效的方式来结束循环。 少部分情况需要一直执行,比如说服务器的请求监听

  10. Feign 基本使用

    在开发 Spring Cloud 微服务的时候,我们知道,服务之间都是以 HTTP 接口的形式对外提供服务的,因此消费者在进行调用的时候,底层就是通过 HTTP Client 的这种方式进行访问。当然我们可以使用JDK原生的 URLConnection、Apache 的 HTTP Client、Netty 异步 H

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词