css基础--简单介绍css
--引入
什么是css?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
样式表定义如何显示 HTML 元素,html标签定义了网页的骨架,而css的作用就是为骨架穿上衣服。并且样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观(也就是为众多骨架同时穿上同一件衣服)。
css语法:
css语法主要由两部分组成:选择器和声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。
selector {
property1:value1 /*第一条声明*/
property2:value2 /*第二条声明*/
……
}
选择器常见的有三种:
1 html元素
2 id选择器
3 class选择器
先来看第一种。html元素可以当选择器,也即是说body p br hr tr td table……都可以作为选择器。
例子1:让所有的段落字体颜色为红色 (段落也就是p)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first page</title>
<style> p {
color: red;
} </style>
</head>
<body>
<h1>test</h1>
<li>haha</li>
<p>hello world</p>
</body>
</html>
段落字体为红色
浏览器显示:
-------------------------------分割线----------------------------------
再来看第二种--id选择器
我们知道,html元素可以使用id属性来标识自身,id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。(ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用)
另外:id 属性只能在每个 HTML 文档中出现一次!!
例子2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first page</title>
<style>
#hw {
color: greenyellow;
}
</style>
</head>
<body>
<h1>test</h1>
<li>haha</li>
<p id="hw">hello world</p>
</body>
</html>
让id为hw的元素内的字体颜色为黄绿色
浏览器显示:
-------------------------------分割线----------------------------------
接下来就是第三种选择器--class选择器
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示。类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用
例子3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first page</title>
<style>
.example {
color: blue;
}
</style>
</head>
<body>
<h1>test</h1>
<li>haha</li>
<p class="example">hello world</p>
</body>
</html>
让引用名为example类的元素中字体颜色为蓝色
浏览器显示:
选择器的组合方式
介绍完了选择器类型,那就来说说选择器的组合方式吧。(这一部分不适合初学者看,可以先了解选择符的组合方式,等对css各属性有所了解后再看更好)
在 CSS3 中包含了四种组合方式:
- 后代选取器(以空格分隔)
- 子元素选择器(以大于号分隔)
- 相邻兄弟选择器(以加号分隔)
- 普通兄弟选择器(以破折号分隔)
1 后代选择符
匹配后面的元素,但仅仅是那些被前面元素嵌套包含的后面元素。例如:div p{} 表示div内嵌套的p元素生效。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div p{
color:red;
background-color: yellow;
} </style>
</head> <body> <div><p>hello world</p></div>
<p>hello world</p>
</body>
</html>
后代选择符实例
2 子元素选择符
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素直接子元素的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div a{
color:red;
background-color: yellow;
}
div>a{
color:green;
background-color: antiquewhite;
} </style>
</head> <body> <div><p>hello world<a href="http://baidu.com" target="_parent"/>BaiDu</p></div>
<div><p>hello world<a href="http://baidu.com" target="_parent"/>BaiDu</p></div>
<div><a href="http://baidu.com" target="_parent"/>BaiDu</div> </body>
</html>
子元素选择符与后代选择符比较
3 相邻兄弟选择符---第一个兄弟选择符
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div+p{
color:red;
background-color: yellow;
} </style>
</head> <body> <div><p>hello world</p></div>
<p>hello world</p> </body>
</html>
相邻兄弟选择符实例
4 普通兄弟选择符----兄弟连选择符
普通兄弟选择器选取所有指定元素的相邻兄弟元素。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div~p{
color:red;
background-color: yellow;
} </style>
</head> <body> <div><p>hello world</p></div>
<p>hello world</p>
<p>hello world</p> </body>
</html>
普通兄弟选择符实例
--如何插入样式表
插入样式表主要有三种:
1 内部样式表
2 外部样式表
3 内联样式
1 内部样式表:
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。
在上面的三个例子中,我们都是使用的内部样式表。内部样式表的格式:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
</style>
</head>
2 外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。
在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<link> 标签定义文档与外部资源的关系,他最常见的用途是链接样式表,仅能出现在<head>标签中。
<link>标签的常用属性:
href: URL 指定被连接文档的地址
type:MIME_type 指定被连接文档的MIME类型
rel:有很多值(详见下图) 指定当前文档与被链接文档的关系
3 内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
继承优先级(由低到高):
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 <head> 标签内部)
- 内联样式(在 HTML 元素内部)
另外,若多个css样式定义了同一个元素,则按照权值选择css样式,权值排序(由低到高):
1 标签,权值为1
2 类选择符,权值为10
3 ID选择符,权值为100
我们也可以为某些样式设置最高权值:
p{color:red!important;} 注意,分号在!important后面
css基础--简单介绍css的更多相关文章
- [CSS布局]简单的CSS三列布局
前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...
- CSS基础语法和CSS经常用到的知识点总结
1. [代码]css基础教程 CSS基础语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.每条声明由一个属性和一个值组成.每个属性有一个值.属性和值被冒号分开.例如:下面这行代 ...
- CSS基础(html+css基础)
css: CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 1.CSS代码语法: css ...
- HTML 网页开发、CSS 基础语法——十.CSS语法
CSS代码书写位置 • CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明 1.内联式 ① 内联式简介 •内联式,也被习惯叫做行内式. •书写位置:在 HTML 标签之上的 style 属性 ...
- CSS基础3——使用CSS格式化元素内容的字体
1.CSS属性单位: (1)长度单位:包含绝对长度单位和相对长度单位 绝对长度单位包含:cm.mm.in.pt.pc等. 绝对长度单位最好用于打印输出设备.在仅作为频幕显示时.绝对长度值并没有什么意义 ...
- CSS基础语法(三) CSS的6种特性
样式表常用写法及特性(组合.继承.关联性.权值性.层叠性.重要性) 1.样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开.-例如:段落元素p.单元格元素td和类c1可以使用相同样式: p ...
- CSS基础语法(一) CSS的3种引入
CSS样式表 CSS可算是网页设计的一个突破,它解决了网页界面排版的难题.可以这么说,HTML的Tag主要是定义网页的内容(Content),而CSS决定这些网页内容如何显示(Layout). Web ...
- CSS基础4——使用CSS格式化元素内容的文本
CSS的文本属性用于控制文本的段落格式,如设置首行缩进.段落对齐方式.字间距.行间距等. 1.设置文本首行缩进:text-indent 可选属性值包含: 长度 / 百分比 2.设置文本对齐方式:tex ...
- CSS基础学习 21.CSS居中总结
注意:*在IE中并不代表通配符的意思,是代表根元素的意思,所以为了匹配适应各种浏览器,进行页面初始化 <style> *{ margin:0; padding:0; } </styl ...
随机推荐
- /etc/profile不生效问题
http://blog.csdn.net/cuker919/article/details/54178611
- 查询数据库时mapper报错:It's likely that neither a Result Type nor a Result Map was specified.
因为mapper.xml里把resultType写成了parameterType
- 2-Third Scrum Meeting-20151203
任务安排 闫昊: 今日完成:请假.(编译+计组,压力有点大) 明日任务:设计本地数据库. 唐彬: 今日完成:请假.(编译+计组,压力有点大) 明日任务:阅读ios客户端代码. 史烨轩: 今日完成:请假 ...
- 任务看板-Monday
工作照
- cron延时
2)Cron表达式范例: 每隔5秒执行一次:*/5 * * * * ? 每隔1分钟执行一次:0 */1 * * * ? 每天23点执行一次:0 0 23 * * ? 每天凌晨1点执行一次:0 0 1 ...
- Sprint8
进展:添加事件主界面实现之后,实现事件添加部分代码的编写,进行设置事件提醒,选择时间.
- 关于 Java连接sql的转载
Java连接SQL Server 2000数据库时,有两种方法: (1)通过Microsoft的JDBC驱动连接.此JDBC驱动共有三个文件,分别是mssqlserver.jar.msutil.jar ...
- 软工实践l练习一一利用github托管项目
这次实践的主题是在windows环境下将项目通过git将项目托管到github上.通过实践,基本掌握一些git命令的使用,在github上注册账号并学会创建repositly和organization ...
- app token session rsp
引用:https://blog.csdn.net/jack85986370/article/details/51362278 一.登录机制 粗略地分析, 登录机制主要分为登录验证.登录保持.登出三个部 ...
- 在Delphi中获得唯一32位长字符串
function GetGUID: string; var vGUID: TGUID; vTemp:string; begin if S_OK = CreateGuid(vGUID) th ...