搜索
首页web前端css教程学习CSS样式的基础总结分享

进行css布局的同时,没有足够的基础知识是不可能的,本文为初学者带来学习CSS样式的基础总结分享,经常使用的css属性,感兴趣的朋友可以参考下,或许有所帮助一.

CSS基本介绍

级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。

CSS是英语CascadingStyle Sheets(层叠样式表单)的缩写,它是一种用来表现HTML或XML等文件样式的计算机语言。CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

二.CSS的使用方法

有三种方法可以在站点网页上使用样式表:

外部样式:将网页链接到外部样式表。

内页样式:在网页上创建嵌入的样式表。

行内样式:应用内嵌样式到各个网页元素。

每一种方法均有其优缺点:

当要在站点上所有或部分网页上一致地应用相同样式时,可使用外部样式表。在一个或多个外部样式表中定义样式,并将它们链接到所有网页,便能确保所有网页外观的一致性。如果人们决定更改样式,只需在外部样式表中修改一次,而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名,例如牛腩新闻发布系统中的公共样式Common.css。然后在需要此样式的页面中将其链接进来,如:



当人们只是要定义当前网页的样式,可使用嵌入的样式表。嵌入的样式表是一种级联样式表,“嵌”在网页的 标记符内。嵌入的样式表中的样式只能在同一网页上使用。 如:



使用内嵌样式以应用级联样式表属性到网页元素上。如:

CSS document





如果网页链接到外部样式表,为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。

要在网页上使用外部样式表的样式,可将该网页链接到样式表,方法是使用位于 “格式” 菜单上的 “样式表连接” 命令。可以链接一个或数个样式表到网页视图模式下的当前网页,或到在文件夹列表中的所选网页,或到站点上的全部网页。

该“样式” 框列出标准 HTML 标记符,例如标题

1,还有嵌入的样式表或链接到网页的外部样式表中所含的类或 ID 选择器。要应用样式到网页元素,请选定该样式然后单击 “样式” 框中的样式或选择器。

在 Microsoft FrontPage 2000中,某些格式设置特性会作为内嵌样式自动应用。例如∶如果使用 “边框与阴影” 命令(在 “格式” 菜单上)在普通段落周围应用框,FrontPage 会写下格式设置信息,作为段落标记符的内嵌样式属性(例如∶ )。然而某些属性的应用需要使用 CSS,其他则需要使用 HTML 。如果人们只想使用 CSS 应用内嵌样式,可使用 “样式”按钮(位于网页元素的 “属性” 对话框里)应用类或 ID 选择器或嵌入式样式。

三、CSS文字属性:

color: #999999; /*文字颜色*/

font-family: 宋体,sans-serif; /*文字字体*/

font-size: 9pt; /*文字大小*/

font-style:itelic;/*文字斜体*/

font-variant:small-caps;/*小字体*/

letter-spacing: 1pt; /*字间距离*/

line-height: 200%; /*设置行高*/

font-weight:bold;/*文字粗体*/

vertical-align:sub;/*下标字*/

vertical-align:super;/*上标字*/

text-decoration:line-through;/*加删除线*/

text-decoration:overline;/*加顶线*/

text-decoration:underline;/*加下划线*/

text-decoration:none;/*删除链接下划线*/

text-transform: capitalize; /*首字大写*/

text-transform: uppercase; /*英文大写*/

text-transform: lowercase; /*英文小写*/

text-align:right;/*文字右对齐*/

text-align:left;/*文字左对齐*/

text-align:center;/*文字居中对齐*/

text-align:justify;/*文字分散对齐*/

vertical-align属性

vertical-align:top;/*垂直向上对齐*/

vertical-align:bottom;/*垂直向下对齐*/

vertical-align:middle;/*垂直居中对齐*/

vertical-align:text-top;/*文字垂直向上对齐*/

vertical-align:text-bottom;/*文字垂直向下对齐*/

四、CSS符号属性:

list-style-type:none;/*不编号*/

list-style-type:decimal;/*阿拉伯数字*/

list-style-type:lower-roman;/*小写罗马数字*/

list-style-type:upper-roman;/*大写罗马数字*/

list-style-type:lower-alpha;/*小写英文字母*/

list-style-type:upper-alpha;/*大写英文字母*/

list-style-type:disc;/*实心圆形符号*/

list-style-type:circle;/*空心圆形符号*/

list-style-type:square;/*实心方形符号*/

list-style-image:url(/dot.gif);/*图片式符号*/

list-style-position:outside;/*凸排*/

list-style-position:inside;/*缩进*/

五、CSS背景样式:

background-color:#F5E2EC;/*背景颜色*/

background:transparent;/*透视背景*/

background-image: url(/image/bg.gif); /*背景图片*/

background-attachment: fixed; /*浮水印固定背景*/

background-repeat: repeat; /*重复排列-网页默认*/

background-repeat: no-repeat; /*不重复排列*/

background-repeat: repeat-x; /*在x轴重复排列*/

background-repeat: repeat-y; /*在y轴重复排列*/

指定背景位置

background-position: 90% 90%; /*背景图片x与y轴的位置*/

background-position: top; /*向上对齐*/

background-position: buttom; /*向下对齐*/

background-position: left; /*向左对齐*/

background-position: right; /*向右对齐*/

background-position: center; /*居中对齐*/

六、CSS连接属性:

a/*所有超链接*/

a:link/*超链接文字格式*/

a:visited/*浏览过的链接文字格式*/

a:active/*按下链接的格式*/

a:hover/*鼠标转到链接*/

鼠标光标样式:

链接手指 CURSOR: hand

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}

七、CSS框线一览表:

border-top: 1px solid #6699cc; /*上框线*/

border-bottom: 1px solid #6699cc; /*下框线*/

border-left: 1px solid #6699cc; /*左框线*/

border-right: 1px solid #6699cc; /*右框线*/

以上是建议书写方式,但也可以使用常规的方式 如下:

border-top-color: #369 /*设置上框线top颜色*/

border-top-width:1px /*设置上框线top宽度*/

border-top-style: solid/*设置上框线top样式*/

其他框线样式

solid/*实线框*/

dotted/*虚线框*/

double/*双线框*/

groove/*立体内凸框*/

ridge/*立体浮雕框*/

inset/*凹框*/

outset/*凸框*/

八、CSS表单运用:

文字方块

按钮

复选框

选择钮

多行文字方块

下拉式菜单

九、CSS边界样式:

margin-top:10px;/*上边界*/

margin-right:10px;/*右边界值*/

margin-bottom:10px;/*下边界值*/

margin-left:10px;/*左边界值*/

十、CSS边框空白

padding-top:10px;/*上边框留空白*/

padding-right:10px;/*右边框留空白*/

padding-bottom:10px;/*下边框留空白*/

padding-left:10px;/*左边框留空白*/

十一、滚动条样式

Scrollbar-face-color:#f3f3f3;/*滚动条凸出部分的颜色*/

Scrollbar-highlight-color:#f1f1f1/*滚动条阴影部分的颜色*/

Scrollbar-shadow-color:#fcfcfc/*立体滚动条阴影颜色*/

Scrollbar-3dlight-color:#fcfcfc/*滚动条亮边的颜色*/

Scrollbar-arrow-color:#34837/*上下按钮上三角箭头的颜色*/

Scrollbar-track-color:#fcfcfc/*滚动条的背景颜色*/

Scrollbar-darkshadow-color:#66c0f4/*立体滚动条强阴影颜色*/

Scrollbar-base-color:#fcfcfc/*滚动条的基本颜色*/

以上是对CSS样式的基础学习,如有出入,还请见谅。

以上是学习CSS样式的基础总结分享的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
将框阴影添加到WordPress块和元素将框阴影添加到WordPress块和元素Mar 09, 2025 pm 12:53 PM

CSS盒子阴影和轮廓属性获得了主题。让我们查看一些在真实主题中起作用的示例,以及我们必须将这些样式应用于WordPress块和元素的选项。

使用GraphQL缓存使用GraphQL缓存Mar 19, 2025 am 09:36 AM

如果您最近开始使用GraphQL或审查了其优点和缺点,那么您毫无疑问听到了诸如“ GraphQl不支持缓存”或

使您的第一个自定义苗条过渡使您的第一个自定义苗条过渡Mar 15, 2025 am 11:08 AM

Svelte Transition API提供了一种使组件输入或离开文档(包括自定义Svelte Transitions)时动画组件的方法。

优雅且酷的自定义CSS卷轴:展示柜优雅且酷的自定义CSS卷轴:展示柜Mar 10, 2025 am 11:37 AM

在本文中,我们将深入研究滚动条。我知道,这听起来并不魅力,但请相信我,一个精心设计的页面是齐头并进的

展示,不要说展示,不要说Mar 16, 2025 am 11:49 AM

您花多少时间为网站设计内容演示文稿?当您撰写新的博客文章或创建新页面时,您是在考虑

使用Redwood.js和Fauna构建以太坊应用使用Redwood.js和Fauna构建以太坊应用Mar 28, 2025 am 09:18 AM

随着最近比特币价格超过20k美元的攀升,最近打破了3万美元,我认为值得深入研究创建以太坊

NPM命令是什么?NPM命令是什么?Mar 15, 2025 am 11:36 AM

NPM命令为您运行各种任务,无论是一次性或连续运行的过程,例如启动服务器或编译代码。

让我们使用(x,x,x,x)来谈论特殊性让我们使用(x,x,x,x)来谈论特殊性Mar 24, 2025 am 10:37 AM

前几天我只是和埃里克·迈耶(Eric Meyer)聊天,我想起了我成长时代的埃里克·迈耶(Eric Meyer)的故事。我写了一篇有关CSS特异性的博客文章,以及

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器