CSS最基础的语法和三种引入方式
**CSS语法**
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。
- selector {declaration1; declaration2; ... declarationN }
每条声明由一个属性和一个值组成。
属性（property）是样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
- selector {property: value}
例如下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
- h1 {color:red; font-size:14px;}
**引入CSS样式**
如何插入样式表，当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：外部样式表、内部样式表和内联样式。
1.外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
- <head><link rel="stylesheet" type="text/css" href="site.css" /></head>
2.内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
- <head>
- <style type="text/css">
- p {margin-left: 20px;}
- body {background-image: url("images/test.gif");}
- </style>
- </head>
3.内联样式由于要将表现和内容混杂在一起，即HTML代码和CSS代码混编，这样会不利于文档结构，并且不容易维护，所以一般不要使用这种方式引入样式。例如改变段落的颜色和左外边距：
- <p style="color: red; margin-left: 20px;">
- This is a paragraph
- </p>
CSS最基础的语法和三种引入方式的更多相关文章
- CSS【03】：CSS 基础选择器与三种引入方式
基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...
- html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
- python全栈开发day38-css三种引入方式、基础选择器、高级选择器、补充选择器
一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显 ...
- Python 45 css三种引入方式以及优先级
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具 ...
- css三种引入方式以及其优先级的说法
css 三种引入方式 方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用 分号 : ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- 前端 CSS 三种引入方式
CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...
- css-1,css的三种引入方式 基本选择器
<!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...
- 006 CSS三种引入方式
CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
随机推荐
- HTML5+Canvas手机拍摄，本地压缩上传图片
最近在折腾移动站的开发,涉及到了一个手机里面上传图片.于是经过N久的折腾,找到一个插件,用法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- python面试题之Python如何实现单例模式？
#使用__metaclass__(元类)的高级python用法 class Singleton2(type): def __init__(cls, name, bases, dict): super( ...
- 解决mxGraph放大/缩小在非IE浏览器下overlay图标位置不变化的问题
首先要创建一个工具栏.并为工具栏中的放大.缩小button定义事件. <div id="toolbar" style="float:left;margin-top: ...
- node的fs模块使用————node
node的fs模块使用----node fs模块是调用文件的模块. var fs=require('fs'); //引用模块. //查看文件信息 fs.stat('index.txt',functio ...
- Bootstrap-带语境色彩的面板
使用语境状态类 panel-primary.panel-success.panel-info.panel-warning.panel-danger,来设置带语境色彩的面板,实例如 ...
- linux系统部署war包,查看tomcat日志
1.部署war包app/tomcat/bin在tomcat/bin 目录下启动 .startup.sh,在启动过程中tomcat会对war包进行解压,形成相应的项目目录 执行命令:./startup. ...
- 6层PCB设计技巧和步骤
6层PCB设计技巧和步骤 一.原理图的编辑 6层板由于PCB板中可以有两层地,所以可以将模拟地和数字地分开.对于统一地还是分开地,涉及到电磁干扰中信号的最小回流路径问题,绘制完原理图,别忘检查错误和 ...
- CS184.1X 计算机图形学导论（第三讲）
第一单元(介绍关于变换的数学知识) :基本二维变换 模型坐标系,世界坐标系 1.缩放 Scale(规模,比例) Sx表示在x方向上放大的倍数,Sy表示在y方向上放大的倍数,因此X坐标乘以Sx,Y坐标乘 ...
- Spring事务中的readonly
来源:https://www.cnblogs.com/straybirds/p/9147892.html Spring的事务经常会有这样的配置: <tx:method name="se ...
- sd卡无法启动及zc706更改主频后可以进入uboot无法启动kernel的坑
好长的标题 +_+ 1.sd卡无法启动 起因:kernel底下通过dd测试速度,擦写了sd卡,再启动时发现无法启动 于是重新格式化,再将BOOT.bin 相关dtb u-rootfs zImage和u ...