html中css样式属性,HTML_css样式表 样式属性 格式布局
于 2021-06-10 03:33:21 发布
阅读量443
收藏
1
点赞数
本文详细介绍了CSS的作用、样式表分类（内联、内嵌、外部）、选择器（标签、类、ID、复合选择器）、样式属性（背景、前景、边界、布局）以及布局技巧（position、z-index、float）。深入探讨了格式与布局的关键概念，适合初学者和进阶者参考。
CSS(Cascading Style Sheet，叠层样式表)，作用是美化HTML网页。
/*注释区域*/此为注释语法
一、样式表
(一)样式表的分类
1.内联样式表
和HTML联合显示，控制精确，但是可重用性差，冗余较多。
例：
内联样式表
2.内嵌样式表
作为一个独立区域内嵌在网页里，必须写在head标签里面。
p //格式对p标签起作用
{
样式；
}
3.外部样式表
新建一个CSS文件，用来放置样式表。如果要在HTML文件中调用样式表，需要在HTML文件中点右键→CSS样式表→附加样式表。一般用link连接方式。
注：css文件中不需要写style标签
有些标签有默认的边距，一般写样式表代码的时候都会先去除(也可以设置其他的样式)，如下：
注：上图就是先去掉边距和间距。
(二)选择器
1.标签选择器。用标签名做选择器。
2.class选择器。都是以“.”开头。
注：class选择器可以和标签选择器叠加，显示出不同效果。
3.ID选择器。以“#”开头。
注：ID选择器可以和标签选择器叠加，显示出不同效果。
4.复合选择器
(1)用“，”隔开，表示并列。
(2)用空格隔开，表示后代。
(3)筛选“.”。
二、样式属性
(一)背景与前景
1.背景：
2.前景字体：
(二)边界和边框
border(表格边框、样式等)、margin(表外间距)。padding(内容与单元格间距)。
(三)列表与方块
width、height、(top、bottom、left、right)只有在绝对坐标情况下才有用。
三、格式与布局
(一)position：fixed
锁定位置(相对于浏览器的位置)，例如有些网站的右下角的弹出窗口。
示例：
(二)position：absolute
绝对位置：
1.外层没有position：absolute(或relative)；那么div相对于浏览器定位，如下图中b(距离浏览器右边框为50像素，距离下边框为20像素)。
2.外层有position：absolute(或relative)；那么div相对于外层边框定位，如下图中bb(距离d的右边框50像素，距离d的下边框为20像素)。
示例：
(三)position：relative
相对位置：
如下图，相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的，那就相对于浏览器进行相对位置的固定。
示例：
(四)分层(z-index)
在z轴方向分层，可以理解为分成一摞纸，层数越高越靠上。
在上面relative的示例中，我们看到了aa遮住了a，这是因为后写代码的显示级别越靠前，那么在不改变代码顺序的情况下如何让a盖住aa。如下：
示例：
(五)float：left、right
Left、right时不用给他规定位置(left、top)，直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。
附加：1、 overflow：hidden； //超出部分隐藏；scroll，显示出滚动条；
2、cursor：pointer 鼠标指到上面时的形状；
3、半透明效果：
在样式表中的代码为：
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}
HTML-CSS样式表-★★★常用属性★★★及基本概念、分类、选择器
样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...
PyQt(Python+Qt)学习随笔：Qt Designer中部件的样式表styleSheet属性
styleSheet属性是定义部件外观的属性样式表,在Qt中styleSheet样式表是类似于html的css样式一样的方法,只是时专门为Qt中的部件开发的.styleSheet的定义语法也是类似CS ...
HTML基础(五)——-css样式表——样式属性——格式与布局
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 绝对位置: 1.外层没有position:a ...
css样式表----------样式属性(背景与前景、边界和边框、列表与方块、格式与布局)
一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...
css样式表及属性
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
第一周复习二 (CSS样式表及其属性)
样式表三种写法 1内联写法:style直接写在标签内.个人感觉多用于个别标签,一般情况优先级较高 style="font-size:16px;" 2内嵌写法:写在
为什么有时候Css样式表某个属性引用不成功？
首次使用博客,很多东西都在探索,第一篇文章也不知道发布点什么,就随便写写,是在word里面写的,也懒得排版,将就这用吧. 闲着没事找了酷狗的API写了个简单的静态网页,完成了搜索,展示,播放功能.就想 ...
css样式表--样式表分类
样式表分类 1.内联式.写在body里.控制精确,可重复性差.
css样式表---样式表分类、选择器
一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.
扫一扫
暂无认证
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
