web之CSS基础指南
css基本语法
css主要由两部分组成:选择器+一条或多条声明
选择器一般为要设置的html样式标签,声明为属性和值,属性之间用“:”分隔。
css中的注释以“ /* ”开始,以“ */ ”结束。
css样式选择器
- id选择器:
写在head中,id选择器通过“ # ”来指定特定id的样式
<style>
#id
{color:red;
}
</style>
- class选择器:
写在head中,class选择器用于描述一组元素的样式,class可以在多个元素中使用
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点”.”号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中
<style>
.center
{text-align:centet;
}
</style>
- 标签选择器:
写在head中,直接通过标签定义样式
<style>
h1
{color:red;
}
</style>
-直接在标签内部通过style属性定义样式
<h3 style="color:red;">菜鸟教程</h3>
这四种 css 选择器有修饰上的优先级,即:
内部定义>id选择器>class选择器>标签选择器
css的使用
通过加载样式表的形式生效。当浏览器读到有样式表的地方时,就会根据它来格式化html代码
css样式表
- 外部样式表
当有多个页面使用此样式时使用。使用外部样式表在改变表中元素即可改变网页格式。通过在head中使用link标签链接到外部样式表。浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
外部样式表可以在任何文本编辑器中进行编辑,直接在文本中写格式即可。文件中只能是html 标签名字。样式表应该以 .css 扩展名进行保存。
h3
{color:red;text-align:left;font-size:8pt;
}
- 内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
- 内连样式表
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。例如当样式仅需要在一个元素上应用一次时。要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style属性可以包含任何CSS属性。本例展示如何改变段落的颜色和左外边距:
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
优先级:内联样式> 内部样式 >外部样式> 浏览器默认样式
优先级高的样式表会覆盖低的,但如果高等级的样式表没有定义样式,则会使用低等级的样式定义。
如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。
css样式之背景
- ##### 背景色
background-color 属性定义了元素的背景颜色,页面的背景颜色使用在head中body选择器下,:
body {background-color:#b0c4de;}
颜色值通常以下方式定义:
十六进制 如:"#ff0000"
RGB 如:"rgb(255,0,0)"
颜色名称 如:"red"
- ##### 背景图片
background-image 属性描述了元素的背景图像。默认情况下,背景图像进行水平竖直重复平铺显示,以覆盖整个元素实体.
页面背景图片使用在head中body选择器下,设置实例:
body
{background-image:url('paper.gif');
}
多个图像层叠
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
为了简便可以将多种背景简写在一起,如下
body {background:#ffffff url('img_tree.png') no-repeat right top;}
当使用简写属性时,属性值的顺序为:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
属性 | 描述 | 值 |
---|---|---|
background-color | 设置元素的背景颜色 | repeat-x水平、repeat-y竖直、norepeat不平铺,展示原图 |
background-image | 把图像设置为背景 | |
background-repeat | 设置背景图像是否及如何重复 | scoll默认跟随滚动、fixed图片固定 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 | |
background-position | 设置背景图像的起始位置 | 从左上到右下九种。x% y%指定坐标,左上角为0%0%。xpos ypos单位像素,左上角为0px0px |
background | 简写属性,作用是将背景属性设置在一个声明中 |
css样式之文本
- 文本颜色
通过color指定文本颜色,对于W3C标准的CSS:如果你定义了颜色属性,你还必须定义背景色属性
body {color:red;} /*指定body所有文本默认颜色*/
h1 {color:#00ff00;} /*指定h1标题文本颜色*/
p.ex {color:rgb(0,0,255);} /*指定ex类段落文本颜色*/
- 文本对齐方式
text-align属性是用来设置文本的水平对齐方式。文本可居中center、左对齐left、右对齐right、两端对齐justity.
当text-align设置为”justify”,每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。 - 文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看,text-decoration属性值为none主要是用来删除链接的下划线。还可以underline下划线、line-through删除线、overline上划线、blink闪烁的文本 - 文本转换
text-transform属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母,或每个单词的首字母大写。
uppercase:全部转换为大写;lowercase全部为小写;capitalize全部首字母大写 - 文本缩进
- text-indent属性是用来指定文本的第一行的缩进值,单位为px
-字符间距、行间距、文本方向
letter-spacing属性增加或减少每个字符之间的空间,为负则表示减少,为正数则增加。
word-spacing属性指定单个单词之间的空间。
line-height指定在一个段落中行之间的空间,数值为百分数,大多数浏览器的默认行高约为110%至120%。
direction设置文本方向,默认ltr左到右,可以rtl右到左。
text-shadow给文本增加阴影效果,例
text-shadow:2px 2px #FF0000 /*制定了阴影的宽高和颜色*/
- 文本图像对齐
vertical-align指定文本与插入的图像的对齐方式。text-top为图像顶部对齐,text-bottom为图像底部对齐,text-middle为图像中部对齐 - 文本格式设置
- white-space属性指定元素内的空白怎样处理。默认空白会被浏览器忽略。
- pre空白会被浏览器保留
- nowrap文本不会换行,直到遇到
标签为止 - pre-wrap保留空白符序列,但是正常地进行换行
- pre-line合并空白符序列,但是保留换行符。
- word-break属性指定单词的断行规则。break-all允许在单词内换行。keep-all只能在半角空格或连字符处换行。
css样式之字体
- font-style指定斜体字体样式, italic斜体
- font-weight指定字体的粗细,lighter变细、blod加粗。
- font-family属性设置文本的字体系列。一般设置一组字体,如果浏览器不支持第一种字体,他将尝试下一种字体。如果字体系列的名称超过一个字,它必须用引号,如font-Family”宋体”。多个字体系列是用一个逗号分隔指明。
- font-size属性设置文本的大小,实际上是设置字符框的高度,默认大小为16px=1em。可以直接设置px单位的文字大小,这样固定了大小;还可以设置em的文字大小,则可以在所有浏览器中调整文本大小。
font属性可以简写所有字体属性。可设置的属性是(按顺序): “font-style font-variant font-weight font-size/line-height font-family”
font-size和font-family的值是必需的
css样式之链接
链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。 特别的链接,可以有不同的样式,这取决于他们是什么状态。
这四个链接状态是:
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
记忆窍门:L(link)OV(visited)E and H(hover)A(active)TE
设置不同状态链接时:
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
通过text-decoration给链接设置不同状态是否有下划线。
通过background-color给链接设置不同状态的背景颜色
css样式之列表
- 列表项标记为字母或数字等的有序列表
- 通过list-style-type设置列表项标记,有upper-roman大写罗马,lower-alpha小写字母等。
- 列表项标记为符号的无序列表
- 通过list-style-type设置列表项标记,有circle圆点、square方块等。
- 列表项标记为图像
- 通过list-style-image指定图像:
html
ul
{
list-style-image: url('sqpurple.gif');
}
在浏览器中IE和Opera显示图像标记比火狐,Chrome和Safari更高一点点想在所有的浏览器放置同样的形象标志,就应使用浏览器兼容性解决方案。 - 浏览器兼容性解决方案:
html
ul/*清空浏览器标记项设置*/
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li/*重新指定标记项设置,并指定图像*/
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
- 通过list-style-image指定图像:
css样式之表格
- 表格边框:指定CSS表格边框,使用border属性,这个属性的边框包括了外围边框、th单元格边框和td单元格边框。表格有双边框,这是因为表和th、 td元素有独立的边界。为了显示一个表的单个边框,可以添加一个 border-collapse属性。
<style>
table {border-collapse: collapse;
}table, td, th {border: 1px solid black;
}
</style>
- 表格大小:通过width和height来设置表格大小。
- 给table设置width就是整个表格的总宽度。百分数表示占网页宽的比重。
- 给th、td设置height分别是th的高、td每行的高,像素值表示直接的高度。
- 表格内容格式:
- ext-align属性设置水平对齐方式,像左left,右,或中心
- vertical-align设置垂直对齐方式,比如顶部top,底部或中间
- padding设置内边距,即内容与单元格边框
- 设置标题位置:
html
caption {caption-side:bottom;}
css盒子模型
所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
- Margin(外边距):清除边框外的区域,外边距是透明的。
- Border(边框) 围绕在内边距和内容外的边框。
- Padding(内边距)清除内容周围的区域,内边距是透明的。
- Content(内容) 盒子的内容,显示文本和图像
所以最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距,高度类似。
盒子模型之边框border
- 通过 border-width属性为边框指定宽度。
为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em,或者使用关键字 thick 、medium(默认值)和 thin。 - border-color属性用于设置边框的颜色。border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。
- border-style属性用来定义边框的样式
- 通过 border-width属性为边框指定宽度。
属性 | 描述 | 属性 | 描述 |
---|---|---|---|
dottde | 点线边框 | dashed | 虚线边框 |
solid | 实现边框 | double | 两个边框 |
groove | 3D沟槽边框,效果根据边框颜色 | ridge | 3D脊边框,效果根据边框颜色 |
inset | 3D的嵌入边框,效果根据边框颜色 | ouset | 3D的突出边框,效果根据边框颜色 |
边框样式可以拆分,然后各不相同:
/*拆分边框样式*/
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;/*简写边框格式,依次为:上、右、下、左
border-style:dotted solid double dashed;/*简写边框,依次为:border-width、border-style、border-color*/
border:5px solid red;
- 盒子模型之轮廓outline
轮廓位于边框边缘的最外围一圈线,可起到突出元素的作用。 有outline-color、outline-style、outline-width分别定义颜色、样式、宽度。 - 盒子模型之外边距margin
类似于边框也可以拆分和简写,如下:
/*拆分magin*/
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;/*简写magin,依次:上、右、下、左*/
margin:25px 50px 75px 100px;
css样式之内容显示与可见
隐藏一个元素可以通过把display显示属性设置为”none”,或把visibility可见属性设置为”hidden”。
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。而display隐藏后不占用空间。
可以通过display改变块元素和内联元素的显示。设置块元素的样式中display:inline表示将内容显示为内联元素;内联元素设置display:block表示将内容显示为块元素。
响应式 Web 设计 - Viewport
viewport 是用户网页的可视区域。手机浏览器是把页面放在一个虚拟的”窗口”(viewport)中,通常这个虚拟的”窗口”(viewport)比屏幕宽,用户可以通过平移和缩放来看网页的不同部分。
web之CSS基础指南相关推荐
- python web开发 CSS基础
文章目录 1. 基础知识 2. ID,Class 选择器 3. CSS盒子模型 4. 嵌入CSS样式 4.1 内联样式表 4.2 内部样式表 4.3 外部样式表 learning from <p ...
- 给你一份详细的web前端CSS布局指南,请查收
我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而其中,关于页面布局的部分,又是书写样式代码时候的重点和难点,这篇文章就尽可 ...
- 前端web之CSS基础(2)
介绍 CSS用于设计风格和布局,是HTML页面美观. 比如,使用CSS来更改内容的字体.颜色.大小.间距,将内容分为多列,或者添加动画及其他的装饰效果. CSS语法 CSS 规则由两个主要的部分构成: ...
- web前端---css基础
一.CSS技术 1.什么是CSS CSS全称叫做层叠样式表stylesheet,是用来修饰HTML网页的一门技术,增强网页的展示能力. 主要是使用CSS属性来实现,最终可以将css代码和HTML网页代 ...
- 从零开始学WEB前端——CSS基础
- web编程技术基础---CSS
转载链接: https://www.baidu.com/link?url=J4xBnCADPUYpDI132XvKo2F9k49iKoskRJARTEMwySMBC5PRGXM6kYVJ_RATuOu ...
- 篇一、Flask打造 Python Web 开发的灵活框架,实现简易登录。要求有 Python、HTML 和 CSS 基础。
⭐ 简介:大家好,我是zy阿二,我是一名对知识充满渴望的自由职业者. ☘️ 最近我沉溺于Python的学习中.你所看到的是我的学习笔记. ❤️ 如果对你有帮助,请关注.点赞,让我们共同进步.有不足之处 ...
- WEB安全之DIV CSS基础(二):文字和文本的属性、列表样式和伪类超链接
WEB安全之DIV CSS基础(二):文字和文本的属性.列表样式和伪类超链接) 文字和文本的属性 文字属性 文本属性 列表样式和伪类超链接 项目符号列举 设置列表项标记 超链接 文字和文本的属性 文字 ...
- web应用与开发--html+css基础题目
目录 html基础题目 一.单选题 (题数:15,共 75.0 分) 二.判断题 (题数:15,共 75.0 分) css基础题目 一.单选题 (题数:2,共 20.0 分) 二.多选题 (题数:3, ...
最新文章
- JavaScript基本知识
- VirtualBox: Effective UID is not root
- 梯度提升决策树GBDT及其优秀改进XGBoost的浅析
- lua sleep函数实现
- CTFshow 命令执行 web60
- Redis简介 与Memcache的区别
- 矩阵乘法 算法训练 试题_蓝桥杯习题集_ 算法训练 矩阵乘法
- 7-4 二叉树的遍历!(简单) (25 分)
- python手机编译器可以干什么_世界上最好的Python编辑器是什么?
- Qt Pro语法总结
- FeedingBottle3.2的下载网站
- 如何用计算机接收光纤网络电视,家里只有一根网络电缆. 电脑和电视如何共享互联网?如何在机顶盒和路由器之间建立连接?...
- VGA PCB布局布线要点
- 输入一个字符串,判断它的所有字符中否全部是大写字母,如不是,统计小写字母个数,并将其转换成大写字母后输出
- Linux-逻辑卷LVM
- 论文笔记(十六):Learning to Walk in Minutes Using Massively Parallel Deep Reinforcement Learning
- 软件测试--黑盒测试用例、测试步骤设计方法(正交实验法、功能图法、其他用例设计方法)
- 团队项目代码分析(Android游戏:别踩白块儿)
- 塔式服务器系统配置,联想TD350塔式服务器系统安装配置注意事项
- 计算机网申兴趣爱好怎么写,网申个人爱好如何填写?