- 博客(59)
- 收藏
- 关注
RSS订阅原创 CSS三大特性
三大特性CSS有三个非常重要的三个特性： ▶层叠性 ▶继承性 ▶优先级■ 层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式层叠性主要解决样式冲突的问题层叠性原则： 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突，不会层叠□ 示例div { color: red; font-siz...
2020-12-25 10:52:00
44
原创 background
■ 定义background属性将background相关属性合并简写在一起，从而节约代码量■ 使用说明语法：background：相关属性值;当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;■ 示例background: black url(images/logo.png) ...
2020-12-24 16:52:00
79
原创 background-attachment
■ 定义background-attachment属性用于设置背景图像是否固定或者随着页面的其余部分滚动■ 使用说明语法：background-attachment：scroll | fixed属性值： scroll：背景图像是随对象内容滚动 fixed：背景图像固定background-attachment后期可以制作视差滚动的效果...
2020-12-24 16:47:00
260
原创 background-position
■ 定义background-position属性用于定义图片在背景中的位置■ 使用说明语法：background-position: x y;属性值： x：x坐标，水平方向 y：y坐标，垂直方向x(水平方向)和y(垂直方向)都使用方位名词或者精确单位□ 方位名词方位名词有以下两类： ▶水平方位：left center right ▶垂直方位：top ce...
2020-12-24 16:44:00
256
原创 background-repeat
■ 定义background-repeat属性用于定义是否及如何对背景图像进行平铺■ 使用说明语法：background-image: repeat | no-repeat | repeat-x | repeat-y ;属性值： repeat：沿着x轴和y轴平铺(默认) no-repeat：不平铺 repeat-x：沿着x轴平铺 repeat-y：沿着y轴平铺背景...
2020-12-24 16:34:00
5567
原创 background-image
■ 定义background-image属性用于定义元素的背景图像■ 使用说明语法：background-image: none | url(图片链接的url)属性值： none：无背景图片(默认的) url：使用绝对或相对地址指定背景图像实际开发常见于logo或者一些装饰性的小图片或者超大的背景图片优点是非常便于控制位置(精灵图也是一种运用场景)■ 示例div ...
2020-12-24 16:28:00
945
原创 background-color
■ 定义background-color属性用于定义元素的背景颜色■ 使用说明语法：background-color: 属性值;属性值： transparent：表示背景颜色是透明，一般情况下元素背景颜色默认值是transparent(透明) 颜色值：预定义的颜色值 / 十六进制 / RGB代码■ 示例div { width: 100px; heigh...
2020-12-24 16:24:00
1333
原创 CSS元素显示模式
■ 关于显示模式元素显示模式就是元素(标签)以什么方式进行显示比如<div>标签独占一行，<span>标签可以在一行里放多个■ 分类显示模式分为以下几类： ▶块元素 ▶行内元素 ▶行内块元素■ 块元素常见的块元素有<h1>~<h6>，<p>，<div>，<ul>，<ol>...
2020-12-24 10:51:00
50
原创 Emmet
■ 关于Emmet在前端开发的过程中，最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等，头疼这里推荐一个Emmet语法规则，能大大提高代码书写，只需要敲一行代码就能生成你想要的完整HTML结构Emmet是一款插件，只要能安装他的编辑器都能使用，大部分编辑器都可以使用该语法规则,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、...
2020-12-23 11:03:00
110
原创 CSS引入方式
■ 三种引入方式按照CSS样式书写的位置(或者引入的方式)，CSS样式表可以分为三大类： ▶行内样式表(行内式) ▶内部样式表(嵌入式) ▶外部样式表(链接式)--推荐使用■ 行内样式表□ 使用说明在元素标签内部的style属性中设定CSS样式，适合于修改简单样式使用行内样式表设定CSS，通常也被称为行内式引入注意： ▶style其实就是标签的属性，属性值由双...
2020-12-22 19:58:00
73
原创 line-height
■ 定义line-height属性用于设置行间的距离(行高)，可以控制文字行与行之间的距离■ 使用说明属性值： ▶相对单位：数字，不带单位，如1.5，表示当前元素的行高为当前元素字体大小的1.5倍 ▶绝对单位：px，如12px，即行高为12px绝对单位的优势在当前元素以及继承该属性的子元素可以自动根据当前字体大小调整行高行高的构成：行间距 = 上间距 + 文本高度 + 下...
2020-12-22 18:14:00
167
原创 text-indent
■ 定义text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进■ 使用说明通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值缩进单位： ▶绝对单位(px)：像素 ▶相对单位(em)：em是一个相对单位，就是当前元素(font-size)1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小■ 示例.p1 ...
2020-12-22 18:04:00
3047
原创 text-decoration
■ 定义text-decoration属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线等■ 使用说明属性值(固定值)： ▶ none：默认，没有装饰线(最常用) ▶ underline：下划线，链接a自带下划线(常用) ▶ overline：上划线(几乎不用) ▶ line-through：删除线(不常用)■ 示例h1 { text-decora...
2020-12-22 17:58:00
5678
原创 text-align
■ 定义text-align属性用于设置元素内文本内容的水平对齐方式■ 使用说明属性值(固定值)： ▶left：左对齐(默认值) ▶right：右对齐 ▶center：居中对齐■ 示例h1 { text-align: left;}h2 { text-align: center;}h3 { text-align: right;}...
2020-12-22 17:53:00
1352
原创 color
■ 定义color属性用于定义文本的颜色■ 使用说明开发中常见的三种颜色表示方式： ▶预定义的颜色值：red, green, blue, pink等 ▶十六进制： #FF0000,#FF6600等(开发中最常用) ▶RGB代码：rgb(255,0,0) 或 rgb(100%,0%,0%)■ 示例div { color: red;}<div>...
2020-12-22 17:48:00
72
原创 CSS属性汇总
■总结因为页面上显示的所有元素都是在<body>标签里的，因此可以通过给<body>标签指定CSS样式，即可给整个页面指定CSS样式但是该方法并不适用所有标签元素，比如标题标签<h1~6>，需要额外指定CSS样式(如字体大小等)■ 字体□ 定义Font系列属性用于定义字体系列，大小，粗细，和文字样式□ 属性font-size 设置字体大小，通...
2020-12-16 17:06:00
87
原创 font
■ 定义font属性用于设置文字的复合属性■ 使用说明通过复合属性，可以更节约代码font属性值必须按照以下语法格式中的顺序书写，不可更换顺序，并且各个属性间以空格隔开font: font-style font-weight font-size/line-height font-family;不需要设置的属性可以省略，浏览器会取其默认值，但必须要保留font-size和font-...
2020-12-16 16:58:00
1550
原创 font-style
■ 定义font-style属性用于设置文字的风格■ 使用说明属性值(固定值)： normal：默认值，浏览器会显示标准的字体样式 italic：浏览器会显示斜体的字体样式注：开发时很少给文字加斜体，相反，要给斜体标签<em> <i>改为不倾斜字体的情况较多■ 示例.noarmal { font-style: normal;}.ital...
2020-12-16 16:47:00
390
原创 font-weight
■ 定义font-weight属性用于设置文字字体的粗细■ 使用说明属性值： normal: 默认值，不加粗 bold: 定义粗体，加粗 100-900：400等同于normal，而700等同于bold，注意这个数字后面不跟单位(推荐)通过该属性，可让加粗标签(如<h>或<strong>)不加粗，或让其他标签加粗实际开发中，更提倡用数字表示粗细■ ...
2020-12-16 16:44:00
5766
原创 font-size
■ 定义font-size属性用于设置字体大小■ 使用说明不同浏览器可能默认显示的字号大小不一致，应尽量给一个明确值大小，不要默认大小谷歌浏览器默认的文字大小为16pxbody { font-size: 16px;}注：<h1~6>(标题)标签比较特殊，<body>标签设定的字体大小不适用于标题标签大小，需要单独为其指定文字大小■ 示例p ...
2020-12-16 16:38:00
1005
原创 font-family
■ 定义font-family属性用于设置文本的字体系列■ 使用说明font-family属性的各属性值(字体)之间必须使用英文状态下的逗号 "," 隔开一般情况下，如果有空格隔开的多个单词组成的字体，要加单引号括起来，如‘Microsoft YaHei’尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正常显示最常见的几个字体，即body {font-family:'Mic...
2020-12-16 16:25:00
1407
原创 CSS选择器
■ 定义根据不同的需求把不同的标签选出来，简单来说，就是选择标签用的■ 选择器的分类选择器有以下分类 ▶基础选择器(由单个选择器组成) ▷ 标签选择器 ▷ 类选择器 ▷ id选择器 ▷ 通配符选择器 ▶复合选择器 ▷后代选择器 ▷子选择器 ▷并集选择器 ▷伪类选择器 ➤ 链接伪类选择器 ...
2020-12-15 18:45:00
111
原创 CSS
关于CSSCSS选择器CSS引入方式CSS元素显示模式CSS三大特性Emmetbackground-color background-image background-repeat background-position background-attachment backgroundcolorfont-family font-size ...
2020-12-15 16:50:00
49
原创 关于CSS
■ 什么是CSSCSS是层叠样式表(cascading style sheets)的简称，有时也称为CSS样式表或级联样式表CSS也是一种标记语言■ CSS的用途CSS的主要使用场景就是美化网页，布局页面，让网页更加丰富多彩，布局更加灵活自如CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式)，图片的外形(宽高，边框样式，边距等)以及版面的布局和外观显示样式简单理解，C...
2020-12-15 16:49:00
112
原创 <textarea>
■ 定义<textarea>标签用于定义多行文本输入■ 使用说明当用户输入内容较多的情况下，就不能使用文本框表单了，此时可以使用<textarea>标签通过<textarea>标签可以轻松创建多行文本输入框，常见于留言板，评论开发中很少使用rows和cols属性，都是通过CSS来改变大小■ 示例<textarea rows="3" col...
2020-12-14 19:44:00
1673
原创 <select>~<option>
■ 定义<select>标签定义下拉列表表单元素■ 使用说明在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，可使用<select>标签控件定义下拉列表<select>标签中至少包含一对<option>在<option>标签中定义select="selected"时，当前项即为默认选中项■ 示例<sele...
2020-12-14 19:37:00
901
原创 <label>
■ 定义<label>标签用于为input元素定义标注(标签)■ 使用说明<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验■ 示例<label for="sex">男</label><input type="radi...
2020-12-14 19:30:00
301
原创 <input>
■ 定义<input>标签用于收集用户信息■ 使用说明<input/>标签为单标签type属性设置不同的值用来指定不同的控件类型■ 示例<input type="属性值"/>■ 属性□ type属性定义：定义不同的空间类型值：包含以下固定值 ▶button：定义可点击按钮(多数情况下，用于通过javascript启动脚本) ▶...
2020-12-14 19:18:00
1081
原创 <form>
■ 定义<form>标签用于定义表单域，以实现用户信息的收集和传递表单域是一个包含表单元素的区域，包含以下部分： ▶ 表单域 ▶表单控件(表单元素) ▶各控件的标示信息<form>标签会把它包含范围内的表单控件信息提交给服务器表单域包含以下表单控件 ▶<input>标签，具体请参照<input>标签 ▶<...
2020-12-14 18:27:00
382
原创 <dl>~<dt>~<dd>
■ 定义<dl>标签用于定义描述列表(或定义列表)自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号dl代表单词Definition List，意为定义列表dt代表单词Definition Term，意为定义术语dd代表单词Definition Description，意为定义描述■ 使用说明该标签会与<dt>(定义项目/名字)和...
2020-12-14 14:26:00
984
原创 <ol>~<li>
■ 定义<ol>标签用于定义有序列表ol代表单词Ordered List，意为排序列表有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义■ 使用说明有序列表排序以数字显示，并且使用<li>标签定义列表项<ol>中只能嵌套<li>,不能有其他标签或纯文本<li>标签相当于一个容器，可以容纳所有元素有序列表会...
2020-12-14 14:21:00
485
原创 <ul>~<li>
■ 定义<ul>标签用于定义HTML页面中项目的无序列表■ 使用说明列表项使用<li>标签定义，一般会以项目符号呈现列表无序列表的各个列表项之间没有顺序级别之分，是并列的<ul>标签中只能嵌套<li>标签，不能有其他标签或纯文本<li>标签相当于一个容器，可以容纳所有元素无序列表会带有自己的样式属性(如每个选项前会有一个实...
2020-12-14 14:17:00
1506
1
原创 标签分类总结
■ 表格标签<table> <tr> <td> <th> <thead> <tbody>■ 列表标签□ 定义表格是用来显示数据的，那么列表就是用来布局的列表最大的特点就是整齐，整洁，有序，它作为布局会更加自由和方便□ 分类根据使用场景不同，列表标签包含以下种类： ▶无序标签：具体请参照<ul~li&...
2020-12-14 13:30:00
282
原创 <tbody>
■ 定义<tbody>标签用于定义表格的主体■ 使用说明主要用于放数据本体，使代码在语义上结构更加清晰，没有显示效果上的意义标签必须放在<table>标签中■ 示例<table> <thead> <tr> <th>...</th> ...
2020-12-14 12:08:00
277
原创 <thead>
■ 定义<thead>标签用于定义表格的头部■ 使用说明主要用于放表格头，使代码在语义上结构更加清晰，没有显示效果上的意义标签必须放在<table>标签中，内部必须拥有<tr>标签，一般是位于第一行■ 示例<table> <thead> <tr> <th&g...
2020-12-14 12:03:00
549
原创 <th>
■ 定义<th>标签定义HTML表格的表头部分th代表单词table header cell，意为表格中的表头■ 使用说明表头单元格也是单元格，常用于表格第一行为突出重要性，表头单元格里面的文字会加粗并居中显示必须包含在<table>标签中■ 示例<table> <tr> <th>...<...
2020-12-14 12:00:00
160
原创 <td>
■ 定义标签用于定义表格中的单元格td代表单词table data cell，意为表格中的一个单元格■ 使用说明必须嵌套在<tr>标签中可以做合并单元格操作，包括跨行合并和跨列合并■ 示例<table> <tr> <th>...</th> </tr> <tr&...
2020-12-14 11:57:00
2035
原创 <tr>
■ 定义<tr>标签用于定义表格中的行tr代表单词table row，意为表格中的一行■ 使用说明必须嵌套在<table>标签中■ 示例<table> <tr> <th>...</th> </tr> <tr> <td>...
2020-12-14 11:54:00
665
原创 <table>
■ 定义<table>为表格标签，用来定义网页中的表格■ 使用说明表格主要用于显示，展示数据，因为它可以让数据显示的非常的规整，使其可读性好表格不是用来布局页面的，是用来展示数据的■ 示例<table align="center" border="1" cellpadding="1" cellspacing="0" width="100" height="50...
2020-12-14 11:32:00
518
原创 特殊字符
■ 定义在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时就可以使用下面的字符来替代■ 使用说明重点记住以下几个特殊字符： ▶空格 ： ▶大于号 ：> ▶小于号 ：<...
2020-12-08 15:34:00
347
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人