CSS入门
CSS,层叠样式表,是对web页面显示效果进行控制的一套标准。当页面的内容受多种样式控制,将会按照一定的顺序处理。
CSS的作用:(1)将网页的内容结构和格式控制分开。(2)可以精确控制页面的所有元素。(3)使页面显示效果更加丰富
语法结构:CSS语法由选择符、属性和值三部分组成
<style type="text/css">
body { background-color: #cccccc }
↓ ↓ ↓
选择符 属性 值
<style>
CSS引用,三种方式
1.行内引用
直接写入html标签中:<body style="background-color:#ccccc;">
2.页内引用
将style标签定义在<head></head>之间:<head><style type="text/css ">body{ background-color:#cccccc;}</style></head>
3.外部引用
将CSS样式代码单独放在一个外部文件中,再由页面进行调用:
外部样式代码:body { background-color:#cccccc; }
在index中引用:
<head><link rel="stylesheet" type="text/css" href="style.css" /></head>
CSS优先级:1>2>3 (哪个样式近就用哪个)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS优先级</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css ">body{ background-color:#cccccc;}</style>
</head>
<body style="background-color:red;">
</body>
</html>
由以上结果可知:行内引用>页内引用>外部引用
CSS注释符:/* 注释内容 */
CSS选择符
(1)通配选择符: * { color:blue;margin:0;padding:0;}
* 号表示所有的对象
(2)元素选择符: body {} h1 {}
指以网页中已有的标签名作为名称的选择符
(3)群组选择符: h1,h2, h3, p {font-size:12px;font-family:arial;}
除了可以对单个标签进行样式指定外,还可以对一组标签进行相同的样式定义
CSS入门的更多相关文章
- [HeadFist-HTMLCSS学习笔记][第七章CSS入门:加一点样式]
CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...
- CSS入门教程——定位(positon)
CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用. 定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...
- 第六十九节,css入门基础
css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
- 胖虎都看得懂的CSS入门
CSS入门 CSS是什么 摘自维基百科 层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...
- 【Python全栈-CSS】CSS入门
CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...
- day 31 html(二) 和css入门
前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门 一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...
- HTML与CSS入门经典(第9版)试读 附随书源码 pdf扫描版
HTML与CSS入门经典(第9版)是经典畅销图书<HTML与CSS入门经典>的最新版本,与过去的版本相同,本书采用直观.循序渐进的方法,为读者讲解使用HTML5与CSS3设计.创建并维护世 ...
- css入门知识点整理
css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...
- H5教程(二),CSS入门(一)选择器
这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1. CSS简介 1.1 CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...
随机推荐
- Git 命令清单
这份命令清单并不完善,后期会根据使用情况再进行更改. 操作分支项目 1 下载仓库的一个分支(baooab-patch-1)的代码 git clone -b baooab-patch-1 https:/ ...
- 【RabbitMQ】RabbitMQ的一些基础概念
工作中使用的是RabbitMQ,需要对其进行熟悉.使用之前,弄清楚它是什么东西,解决什么问题. 场景 一些不必实时执行的任务 开发中,有一些任务并无须实时执行,比如: 会员更新个人信息,更新会员信息之 ...
- Java 动态生成复杂 Word
Java 动态生成复杂 Word 阅读目录 1. 制作 Word 模版,将你需要动态生成的字段用${}替换.2. 将 Word文档保存为 xml .3. 引入项目. 项目中需要用 java 程序生成d ...
- XML特殊符号
在XML中"<" 字符和"&"字符是严格禁止使用的.要使用这几种字符需要使用它们的实体, 下面是五个在XML文档中预定义好的实体:< < ...
- 如何正确使用$_SERVER['DOCUMENT_ROOT']识别该路径的文件
echo $_SERVER['DOCUMENT_ROOT']; 这时输出当前文件所在的路径 D:/phpStudy/WWW/study/php&mysql $_SERVER['DOCUMENT ...
- [地图SkyLine二次开发]框架(1)
项目介绍: 项目是三维地理信息系统的开发,框架MVC4.0 + EF5.0 + Extjs4.2 + SkyLine + Arcgis,是对SkyLine的二次开发. 项目快结束了,先给大家看一眼效果 ...
- Nodejs 之Ajax的一个实例(sql单条件查询&并显示在Browser端界面上)
1.Broswer端的Ajax <!DOCTYPE html> <html> <head lang="en"> <meta charset ...
- mac 下jetbrains IDE系列IDE主题
1.直接粘贴导入 使用shift+command+g键进入: ~/Library/Preferences/ 在下边找到当前的IED(WebStrom.IdealIC.PyCharm) 然后在下边找到c ...
- Observer,Observable实现观察者模式
(#)个人对于观察者的理解:观察者与发布订阅模式是非常的相似的,例如当多个威信使用者订阅了同一个主题之后,那么这个主题就是一个被观察者,而这些用户就是观察 者,当这个主题更新了新的内容以后,就要通知所 ...
- 【Java】变量类接口_学习笔记
变量.类和接口 1.变量的类型 实例变量(不以static修饰) 成员变量 类变量(以static修饰) 所有变量 形参(方法签名中定义的变量) 局部变量 方法局部变量(在方法内定义) ...