CSS学习—day1
摘要:web前端设计三剑客分为是html、CSS、Javascript,前面我们已经对html基础知识做了介绍,它定义了页面基本组成,而CSS则控制网页的样式和布局。
首先,明确一个问题,什么是CSS?
1.CSS指层叠样式表 (Cascading Style Sheets)
2.能定义如何显示HTML元素
3.解决内容与表现分离的问题
4.外部样式表极大提高工作效率
下面,开始正题
- CSS语法
CSS规则由两个主要部分组成:选择器,以及一条或多条声明
选择器 声明1 声明2
h1 {color:blue;text-align:center;}
属性 值 属性 值
CSS声明总是以分号(;)结束,声明总以大括号({})括起来:
如h1 {color:blue;text-align:center;}
CSS注释以“/*”开始,以“*/”结束。
CSS Id和Class
以#表示选择器的id
以.表示选择器的class
以p.表示所有p标签class
- CSS创建
样式表的插入:①外部样式表 ②内部样式表 ③内联样式表
外部样式表:适用于样式需要应用到很多页面
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
每个页面使用<link>标签链接到样式表,且位于文档的头部。
mystyle.css样式表不能包含任何的html标签,如
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>
内联样式:相关标签内使用
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
- 背景
背景颜色:body {background-color:#b0c4de;}
背景图片:
body {background-image:url('paper.gif');}图片默认在水平和垂直方向平铺
body {background-image:url('paper.gif');background-repeat:repeat-x;}图片在水平方向平铺
body {background-image:url('paper.gif');background-repeat:no;}图片不平铺
body {background-image:url('paper.gif');background-repeat:no;background-position:right top;}图片不平铺且在右上
属性值顺序
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
最新文章
- 最好的5个Android ORM框架
- CSS3制作心形头像
- easyui datagrid 动态添加columns属性
- Hadoop学习12-配置集群环境
- Linux Versus Windows, Ubuntu/Mint V XP/Vista/7
- 删除_desktop.ini病毒文件
- WPF换肤之四:界面设计和代码设计分离
- HDU5014Number Sequence(贪心)
- 【SPOJ】Distinct Substrings(后缀自动机)
- asp.net core参数保护之自定义要保护的参数类型
- JSR286portlet中使用Ajax的方法
- bash内建命令
- STM32的型号的命名规则
- ubuntu 菜单栏和终端都消失了,鼠标也成了一个&#215; 解决办法!!!
- timestamp与timedelta,管理信息系统概念与基础
- Docker(1):初体验之应用挂载到容器
- (暴力 记录)Camellia的难题 -- zzuli -- 1784
- 错误:Python Urlfetch Error:&#39;GET
- Python学习之路 (一)开发环境搭建
- streamsets redis destinations 使用