网页制作之html基础学习3-css样式表
样式:CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页。
在样式里面用 /* */ 进行注释。
1、样式表的基本概念
1.1、样式表分类
1、内联样式表
和html联合显示,控制精确,但是可重用性差,冗余多。
例:<p style="font-size:14px;">内联样式表</p>
2、内嵌样式表
作为一个独立区域内嵌在网页里,必须写在head标签里边。
<style type= "text/css">
p //格式对p标签起作用
{
样式;
}
</style>
3、外部样式表
新建一个CSS文件,用来放样式表。如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式→附加样式表。一般用link连接方式。
有些标签有些默认的边距,一般写样式表代码的时候都会先去除(也可以设置其他样式),如下:
1 <style type= "text/css">2 3 * //格式对所有标签起作用4 5 { 6 7 margin:0px; 8 9 padding:0px; 10 11 } 12 13 </style>
1.2、选择器
1、标签选择器。用标签名做选择器。
<style type= "text/css">
p //格式对p标签起作用
{
样式;
}
</style>
2、class选择器。都是“.”开头。
<head>
<style type="text/css">
.main /*定义样式*/
{
height:42px;
width:100%;
text-align:center;
}
</style>
</head>
<body>
<div class="main"> <!--调用class样式-->
</div>
</body>
3、ID选择器。以“#”开头
<div id="样式名">
<head>
<style type="text/css">
#main /*定义样式*/
{
height:42px;
width:100%;
text-align:center;
}
</style>
</head>
<body>
<div id="main"> <!--调用id样式-->
</div>
</body>
4、复合选择器。
1 1)、用“,”隔开,表示并列。(并集选择器)2 3 <style type="text/css">4 5 p,span/*标签p、span两者同样的样式*/ 6 7 { 8 9 样式;10 11 } 12 13 </style>14 15 2)、用空格隔开,表示后代。16 17 (子选择器:也就是只有对直接后代有影响的选择器,而对“孙子”以及对个层的后代不产生作用。18 格式如下:p>span{color:blue;})19 20 <style type="text/css">21 22 .main p/*找到使用样式“main”的标签,在该标签里的P标签使用该样式*/ 23 24 { 25 26 样式;27 28 } 29 </style>30 31 3)、筛选“.”。(交集选择器)32 33 <style type="text/css">34 35 p.sp/*在标签p中的class="sp"的标签,执行以下样式*/ 36 37 { 38 39 样式;40 41 } 42 43 </style>
5、子元素选择器
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。
例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <styletype="text/css"> 5 h1 > strong{color:red;} 6 </style> 7 </head> 8 9 <body> 10 <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> 11 <h1>This is <em>really <strong>very</strong></em> important.</h1> 12 </body> 13 </html>
结果:
This is very very important.This is really very important.
2、样式属性
2.1、背景与前景(前景:指文本)
background-color:#F90; /*背景色,样式表优先级高*/
background-image:url(路径); /*设置背景图片(默认)*/
background-attachment:fixed; /*背景是固定的,不随字体滚动*/
background-attachment:scroll; /*背景随字体滚动*/
background-repeat:no-repeat; /*no-repeat,不平铺;repeat,平铺;repeat-x,横向平铺;repeat-y,纵向平铺*/
background-position:center; /*背景图居中,设置背景图位置时,repeat必须为“no-repreat”*/
background-position:right top; /*背景图放到右上角(方位可以自己更改)*/
background-position:left 100px top 200px; /*离左边100像素,离上边200像素(可以设为负值)*/
字体
font-family:"新宋体"; /*字体。常用微软雅黑、宋体。*/
font-size:12px; /*字体大小。常用像素12px、14px、18px。还可以用“em”,“2.5em”即:默认字体的2.5倍。还可以用百分数*/
font-weight:bold; /*bold是加粗,normal是正常*/
font-style:italic; /*倾斜,normal是不倾斜*/
color:#03C; /*颜色*/
text-decoration:underline; /*下划线,overline是上划线,line-through是删除线,none是去掉下划线*/
text-align:center; /*(水平对齐)居中对齐,left是左对齐,right是右对齐*/
vertical-align:middle; /*(垂直对齐)居中对齐,top是顶部对齐,bottom是底部对齐。一般设置行高后使用。*/
text-indent:28px; /*首行缩进量*/
line-height:24px; /*行高。一般为1.5~2倍字体大小。*/
display:none; /*none,不显示;inline-block,显示为块,不自动换行,宽高可设;block,显示为块,自动换行;inline,效果同span标签,不自动换行,宽高不可设。(针对行内元素可设定为block,块级元素可设定为inline)*/
块状元素
|
内联元素
|
---|---|
address - 地址
blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易,也是CSS layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线 isindex - input prompt menu - 菜单列表 noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容 noscript - 可选脚本内容(对于不支持script的浏览器显示此内容) ol - 有序表单 p - 段落 pre - 格式化文本 table - 表格 ul - 无序列表 |
a - 锚点
abbr - 缩写 acronym - 首字 b - 粗体(不推荐) bdo - bidi override big - 大字体 br - 换行 cite - 引用 code - 计算机代码(在引用源码的时候需要) dfn - 定义字段 em - 强调 font - 字体设定(不推荐) i - 斜体 img - 图片 input - 输入框 kbd - 定义键盘文本 label - 表格标签 q - 短引用 s - 中划线(不推荐) samp - 定义范例计算机代码 select - 项目选择 small - 小字体文本 span - 常用内联容器,定义文本内区块 strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本 u - 下划线 var - 定义变量 |
visibility:hidden; /*可视性。hidden,隐藏但是占空间;visible,显示。*/
display与visibility区别:
a、Display的属性值
block:
/*表现为一个块级元素(一般情况下独占一行)*/
当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<DIV>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<DIV>一样工作。
inline:
/*表现为一个行级元素(一般情况下不独占一行)*/
将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<DIV>,它也将会被组合成像<span>那样的输出流。
none:
/*元素不可见,并且不为其保留相应的位置*/
最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填充。
b、Display的使用
1)、display默认属性值为块级的元素:
adress,quote,body,xmp,center,col,colgroup,dd,dtr,div,
dl,dt,fieldset,form,hn,hr,iframe,legend,listing,marquee,
menu,ol,p,plaintext,pre,table,td,th,tr,ul
2)、display默认属性值为none的元素:
br,frame,nextid,tbody,tfoot,thead
3)、li元素的display属性默认值为:list-item
4)、其他元素display属性默认值都为inline
c、Display的特性
改变元素的display属性将对周围元素造成的影响有:
1、在属性值设为block的元素后面添加新行
2、从属性值设为inline的元素所在行中删除一行
3、隐藏属性值设为none的元素并且释放该元素在文档中所占的物理空间,对于其他元素来说,相当于该元素不存在,因此,该元素的位置被其他元素顶替
d、visibility的属性值
visibility:visible/*元素可见,默认值*/
visibility:hidden/*元素不可见,但仍然为其保留相应的空间*/
visibility:collapse
/*只对table对象起作用,能移除行或列但不会影响表格的布局。如果这个值用在table以外的对象上则表现为hidden。*/
visibility:inherit
/*继承上级元素的visibility值。*/
e、visibility特性
用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示,visible表示显示,hidden表示隐藏。当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。
f、由以上可以了解到 Visibility:none 和 Display:hidden 的区别
display:none;
使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;
visibility:hidden;
使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。
g、什么时候使用Visibility或者Display属性?
Visibility和Display属性虽然都可以达到隐藏页面元素的目的,但它们的区别在于如何回应正常文档流。
如果你想隐藏某元素,但在页面上保留该元素的空间的话,你应该使用visibility:hidden。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display:none。
在现实中更多的倾向于使用display属性(相信这也是大多数人的习惯,bolo注)。当你决定用display:none来隐藏一个元素时,你必须知道其它内容将填充到该元素留下的空白位置,从而改变页面的布局。
h、使用Visibility或者Display属性的注意事项
display:none:
1)、JS读取元素属性值
如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏,载入页面后,在没有通过js设置样式使元素显示的前提下,使用js代码会无法正确获得该元素的一些属性,比如offSetTop,offSetLeft等,返回的值会为0,通过js设置style.display来使元素显示后才能正确获得这些值。
2)、SEO优化时需要注意
使用display:none隐藏的元素不会被百度等搜索网站检索,会影响到网站的SEO,某些情况下可以使用left:-100000px来达到同样效果。
3)、样式文件
如果是通过样式文件或<style>css</style>方式来设置元素的display:none样式,用js设置style.display=""并不能使元素显示,可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题
4)、有些情况下可以使用style.visibility来代替style.display,但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间,而style.display隐藏元素且让出所占页面空间。
visibility:hidden:
如果想让某一段代码在前台不显示,最简单的方法是用css的display:none,这样,下边的内容就自动填补这个空隙。但是在一些特殊的情况下,我们只需要隐藏这个元素,但它的位置不能被占用了,那么,visibility:hidden就可以实现这个要求。
2.2、边界和边框
border(表格边框、样式等)、margin(表外间距)、padding(内容与单元格间距)
border:5px solid blue; /*四边框:5像素宽、实线、蓝色(相当于以下三行)*/
border-width:5px;
border-style:solid;
border-color:blue;
border-top:5px solid blue; /*上边框:5像素宽、实线、蓝色(分写同上)*/
border-bottom:5px solid blue; /*下边框:5像素宽、实线、蓝色(分写同上)*/
border-left:5px solid blue; /*左边框:5像素宽、实线、蓝色(分写同上)*/
border-right:5px solid blue; /*右边框:5像素宽、实线、蓝色(分写同上)*/
margin:10px; /*四边外边框宽度为10像素。auto,居中。*/
margin-top:10px; /*上边外边框宽度为10像素;其他三边边框类似*/
margin:20px 0px 20px 0px; /*上-右-下-左,四边外边框顺时针顺序*/
padding:10px; /*内容与边框的四边间距为10像素*/
padding-top:10px; /*内容与边框的上间距为10像素;其他三边间距类似*/
padding:20px 0px 20px 0px; /*上-右-下-左,内容与边框的四边间距顺时针顺序*/
2.3、列表与方块
width、height、(top、bottom、left、right)只有在绝对坐标情况下才有用
list-style:none; /*取消序号*/
list-style:circle; /*序号变为圆圈,样式相当于无序*/
list-style-image:url(图片地址); /*图片做序号*/
list-style-position:outside; /*序号在内容外*/
list-style-position:inside; /*序号跟内容在一起*/
转载于:https://www.cnblogs.com/zyh-club/p/4695041.html
网页制作之html基础学习3-css样式表相关推荐
- 如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
- 前端基础 CSS 第十一章 使用CSS样式表 ----暑假学习第七、八天
第十一章 使用CSS样式表 通过CSS样式定义,可以将网页制作得更加绚丽多彩.采用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其他效果实现更加精确地控制.用CSS不仅可以做出令浏览者赏心悦目 ...
- 前端基础 CSS 第十一章 使用CSS样式表 特效属性部分 ----暑假学习第九天
第十一章 使用CSS样式表 11.8 定位属性 使用定位属性可以控制元素的位置,包括相对定位和绝对定位两种方式.相对定位指允许元素在相对于文档布局的原始位置上进行偏移,而绝对定位是指允许元素与原始文档 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- CSS 样式表大全(学习笔记)
简述: 此笔记是学习Qt开发时产生的,主要是对Qt组件样式设计学习的一个简单记录,仅供参考使用. css样式被称为为"层叠样式表",是一种网页制作做不可或缺的技术,是用于装饰网页, ...
- 怎样用html设置文档格式,Dreamweaver使用CSS样式表设置网页文本格式
Dreamweaver使用CSS样式表设置网页文本格式 互联网 发布时间:2008-10-17 19:35:50 作者:佚名 我要评论 本文章介绍如何在 Dreamweaver 中使用层叠 ...
- 把css样式表与html网页关联的方法,Dreamweaver 教程-CSS样式表的3种关联方法
下面我们来讲讲如何为一个网页添加CSS样式. 内部样式表 内部样式表需要在网页的 部分定义,格式如下: 行内样式表(内嵌样式表) 它的使用方法我们在前两节也已经使用过了.行内样式表直接在标签内部定义, ...
- CSS基础 外部样式表 内嵌样式表 行内样式表
CSS简述:css是Cascading Style Sheet的缩写,直译过来为层叠样式表或级联样式表,简称样式表.利用css样式表定义页面样式,将会大大减少设计工作量.一些好的css样式表的建立,可 ...
- 【HTML基础-4】CSS样式详解
目录 1 CSS样式概述 2 CSS与HTML的三种组合方式 2.1 内联样式 2.2 内部样式表 2.3 外部引用 3 总结 参考文章 1 CSS样式概述 定义: CSS是Cascading Sty ...
最新文章
- 7-2 然后是几点 (Java)
- 都说 WebP 厉害,究竟厉害在哪里?
- js 前端操作的分页路由设计
- FusionCharts简明教程(一)---建立FusionCharts图形
- Butter Knife 8.8.1的安装和使用
- java websocket 客户端
- vc++ 6.0 创建程序快捷方式的一个例子源码_漏洞复现:phpcms v9.6.0任意文件上传漏洞(CVE201814399)...
- GMQ交易平台大力探索区块链技术,进一步推动产业繁荣
- python3-numpy np.nditer 迭代数组、np.nditer修改数组、np.nditer广播迭代
- springwebflux 页面_【SpringBoot WEB系列】WebFlux静态资源配置与访问
- 【计算机组成原理】1.计算机系统概述
- 数据挖掘—Apriori算法
- 万用表(数字多电表)的认识与使用
- 我国人口预计 15 年内是会逐渐分散在大中小城市,还是继续向大城市集中?我们应留在大城市发展吗?
- css 下拉框 下三角形
- 深度学习制作自己的样本
- 神经网络基础与顺序神经网络的构建
- 苹果iOS系统下的推送机制及实现
- Unity基础:文本框、图片自适应(ContentSizeFitter、VerticalLayoutGroup等组件的使用)
- Chromium安装flash插件