前端CSS讲义1

什么是 CSS?

  • CSS 指层叠样式表 

  • 样式定义如何显示 HTML 元素

  • 样式通常存储在样式表

  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题

  • 外部样式表可以极大提高工作效率

  • 外部样式表通常存储在 CSS 文件

  • 多个样式定义可层叠为一

  • 样式对网页中元素位置的排版进行像素级精确控制

CSS 语法

CSS 实例

CSS 规则由两个主要的部分构成:

选择器,以及一条或多条声明:

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

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。

每个属性有一个值。属性和值被冒号分开。

CSS 声明总是以分号 ( ; ) 结束,声明组以大括号 ({ }) 括起来:

p {color:red;text-align:center;}

CSS 颜色值的写法

在描述颜色的时候,除了使用英文单词 red,还可以使用十六进制的颜色值 #ff0000:

p { color: #ff0000; }

 我们还可以通过两种方法使用 RGB 值:

p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); }

提示:当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位。 

 CSS 注释

CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:

/*这是个注释*/        p        {       text-align:center;       /*这是另一个注释*/     color:black;     font-family:arial;       }

CSS Id 和 Class选择器

如果你要在 HTML 元素中设置 CSS 样式,你需要在元素中设置 "id" 和 "class" 选择器。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 来定义。

以下的样式规则应用于元素属性 id = "para1":

示例:

#para1
{ text-align:center;
color:red; }

注:

ID 属性不要以数字开头。

ID 属性只能在每个 HTML 文档中出现一次。

 class 类选择器

  • class 可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点"."号显示:

在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

示例:

.center {text-align:center;}

你也可以指定特定的 HTML 元素使用 class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

 p.center {text-align:center;}

 标签选择器

除了提到的 id 和 class 选择器外,第三种选择器为标签选择器,即以 HTML 标签作为 CSS 修饰所用的选择器。

示例:

<style>h3{color:red;}</style><h3>W3cschool教程</h3>

内联选择器

直接在标签内部写 CSS 代码。

实例:

<h3 style="color:red;">W3cschool教程</h3>

 优先级

这四种 CS 选择器有修饰上的优先级,即:

内联选择器 > id选择器 > 类选择器 > 标签选择器

CSS 创建 

插入样式表的方法有三种:

  • 外部样式表
  • 内部样式表
  • 内联样式

 外部样式表

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .CSS 扩展名进行保存。下面是一个样式表文件的例子:

hr {color:sienna;}            

p {margin-left:20px;}            

body {background-image:url(/images/back40.gif);}

 内部样式表

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:

<head><style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>

内联样式

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

例如,外部样式表拥有针对 H3 选择器的三个属性:

h3       {        color:red;        text-align:left;     font-size:8pt;    }

而内部样式表拥有针对 H3 选择器的两个属性:

h3       {        text-align:right;        font-size:20pt;     }

假如拥有内部样式表的这个页面同时与外部样式表链接,那么 H3 得到的样式是:

color:red; text-align:right;        

font-size:20pt;

 即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。

层叠次序

当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 head 标签内部)
  4. 内联样式(在 HTML 元素内部)

因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明: 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

 提示:如果你使用了外部文件的样式在内部样式中也定义了该样式,则内部样式表会取代外部文件的样式。

多重样式优先级深入理解 

优先级用于浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。

优先级仅由选择器组成的匹配规则决定的。

优先级就是分配给指定的CSS声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。

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

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

相关文章

【opencv】示例-morphology2.cpp 形态学操作:膨胀、腐蚀、开运算、闭运算

element_shape MORPH_ELLIPSE; element_shape MORPH_RECT element_shape MORPH_CROSS; // 包含必要的OpenCV头文件 #include "opencv2/imgproc.hpp" // 图像处理 #include "opencv2/imgcodecs.hpp" // 图像编码解码 #include "opencv2/highgui.hpp…

2024年认证杯数学建模挑战赛C题全解析

2024年认证杯C题的已经完成啦&#xff0c;包括参考论文&#xff0c;模型代码&#xff0c;分享给大家&#xff5e; 问题分析 对于这些问题&#xff0c;我们首先需要确定影响日光辐射降低效应的关键参数&#xff0c;例如海盐气溶胶的浓度、粒子大小、分布以及喷洒高度和范围。同…

【央国企专场】——国家电网

国家电网目录 一、电网介绍1、核心业务2、电网组成 二、公司待遇三、公司招聘1、招聘平台2、考试安排2.3 考试内容 一、电网介绍 1、核心业务 国家电网公司&#xff08;State Grid Corporation of China&#xff0c;简称SGCC&#xff09;是中国最大的国有企业之一&#xff0c…

Vue3——html-doc-ja(html导出为word的js库)

一、下载 官方地址 html-doc-js - npm npm install html-doc-js 二、使用方法 // 使用页面中引入 import exportWord from html-doc-js// 配置项以及实现下载方法 const wrap document.getElementById(test)const config {document:document, //默认当前文档的document…

H2O-3机器学习平台源码编译的各种坑

H2O-3机器学习平台是一个非常适合非专业人士学习机器学习的平台&#xff0c;自带WebUI&#xff0c;效果还是蛮不错的&#xff0c;官方也提供了jar包&#xff0c;一条命令就能直接运行&#xff0c;非常方便&#xff0c;但最近有源码编译的需求&#xff0c;实际操作过程中&#x…

【计算机毕业设计】日用百货交易网站——后附源码

&#x1f389;**欢迎来到我的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 一名来自世界500强的资深程序媛&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 在深度学习任务中展现出卓越的能力&#xff0c;包括但不限于…

Chatgpt掘金之旅—有爱AI商业实战篇|播客剧本写作|(十三)

演示站点&#xff1a; https://ai.uaai.cn 对话模块 官方论坛&#xff1a; www.jingyuai.com 京娱AI 一、AI技术创业播客剧本写作服务有哪些机会&#xff1f; 人工智能&#xff08;AI&#xff09;技术作为当今科技创新的前沿领域&#xff0c;为创业者提供了广阔的机会和挑战。…

4、jvm-垃圾收集算法与垃圾收集器

垃圾收集算法 分代收集理论 当前虚拟机的垃圾收集都采用分代收集算法&#xff0c;这种算法没有什么新的思想&#xff0c;只是根据对象存活周期的不同将内存分为几块。一般将java堆分为新生代和老年代&#xff0c;这样我们就可以根据各个年代的特点选择合适的垃圾收集算法。 比如…

最新Zibll子比主题V7.1版本源码 全新推出开心版

源码下载地址&#xff1a;Zibll子比主题V7.1.zip

JavaEE实验三:3.5学生信息查询系统(动态Sql)

题目要求: 使用动态SQL进行条件查询、更新以及复杂查询操作。本实验要求利用本章所学知识完成一个学生信息系统&#xff0c;该系统要求实现3个以下功能: 1、多条件查询&#xff1a; 当用户输入的学生姓名不为空&#xff0c;则根据学生姓名进行学生信息的查询&#xff1b; 当用户…

搭建基于Hexo的个人博客,以及git相关命令

全文写完之后的总结 测试命令 hexo clean hexo g hexo s 上传到服务器命令 hexo clean hexo g hexo d 上传到服务器&#xff08;如果上一个命令用不了&#xff09;&#xff0c;也要先hexo clean,hexo g git init git add . git commit -m "first commit" git p…

jenkins下载安装(mac)

下载官网 具体 直接命令安装 Sample commands: Install the latest LTS version: brew install jenkins-ltsStart the Jenkins service: brew services start jenkins-ltsRestart the Jenkins service: brew services restart jenkins-ltsUpdate the Jenkins version: brew u…

在Linux上利用mingw-w64生成exe文件

一、概要 1、elf与exe 在Linux上用gcc直接编译出来的可执行文件是elf格式的&#xff0c;在Windows上是不能运行的 Windows上可执行文件的格式是exe 利用mingw-w64可以在Linux上生成exe格式的可执行文件&#xff0c;将该exe文件拷贝到Windows上就可以运行 2、程序要留给用户…

数据结构——单链表(C语言版)

文章目录 一、链表的概念及结构二、单链表的实现SList.h链表的打印申请新的结点链表的尾插链表的头插链表的尾删链表的头删链表的查找在指定位置之前插入数据在指定位置之后插入数据删除pos结点删除pos之后的结点销毁链表 三、完整源代码SList.hSList.ctest.c 一、链表的概念及…

PVE下安装配置openwrt和ikuai

开端 openwrt 和 ikuai 是比较出名的软路由系统。我最早接触软路由还是因为我的一个学长要改自己家里的网络&#xff0c;使用软路由去控制网络。我听说后便来了兴致&#xff0c;也在我家搞了一套软路由系统。现在我已经做完了&#xff0c;就想着写个文章记录一下。 软路由简介…

Flutter中间镂空的二维码扫描控件

1、UI效果图&#xff1a; 2、中间镂空UI&#xff1a; class CenterTransparentMask extends CustomClipper<Path> {final double? width;CenterTransparentMask({this.width});overridePath getClip(Size size) {final path Path()..addRect(Rect.fromLTWH(0, 0, size…

Navicat Premium 16 for Mac/Win:数据库管理的全能之选

在数字化时代&#xff0c;数据库管理已成为各行各业不可或缺的一环。而Navicat Premium 16作为一款功能强大的数据库管理软件&#xff0c;无疑为数据库管理员和开发者提供了高效、便捷的解决方案。 Navicat Premium 16支持多种主流数据库系统&#xff0c;无论是MySQL、Postgre…

MyBatis批量插入的五种方式

MyBatis批量插入的五种方式: 一、准备工作 1、导入pom.xml依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- MySQL驱动依赖 --…

R:普通分组柱状图

输入文件实例&#xff08;存为csv格式&#xff09; library(ggplot2) library(ggbreak)# 从CSV文件中读取数据 setwd("C:/Users/fordata/Desktop/研究生/第二个想法(16s肠型&#xff0b;宏基因组功能)/第二篇病毒组/result/otherDB") data <- read.csv("feta…

UI自动化测试案例

备注:本文为博主原创文章,未经博主允许禁止转载。如有问题,欢迎指正。 个人笔记(整理不易,有帮助,收藏+点赞+评论,爱你们!!!你的支持是我写作的动力) 笔记目录:笔记本~笔记目录_airtest和selenium那个好用-CSDN博客 个人随笔:工作总结随笔_8、以前工作中都接触过哪…