web之CSS基础指南

最新推荐文章于 2023-07-26 08:57:20 发布

一叶轻舟向大海

最新推荐文章于 2023-07-26 08:57:20 发布

阅读量2.4k

点赞数 3

本文链接：https://blog.csdn.net/weixin_42628805/article/details/81026425

版权

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; }

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属性用来定义边框的样式

属性	描述	属性	描述
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）比屏幕宽，用户可以通过平移和缩放来看网页的不同部分。

一叶轻舟向大海

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
web之CSS基础指南

css基本语法css主要由两部分组成：选择器+一条或多条声明选择器一般为要设置的html样式标签，声明为属性和值，属性之间用“：”分隔。 css中的注释以“ /* ”开始，以“ */ ”结束。 css样式选择器id选择器：写在head中，id选择器通过“ # ”来指定特定id的样式&amp;lt;style&amp;gt;#id{ color:red;}&amp;l...
复制链接

扫一扫