您现在的位置是：首页 > 技术教程 正文

前端HTML与CSS基础

admin 阅读： 2024-03-31
后台-插件-广告管理-内容页头部广告（手机）

第三章 初识css

 一.css核心基础
1.Css样式规则
2.引入css样式表

（1）行内式：

也称内联样式，通过标签style属性设置元素样式。以下为基本语法：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 标签名>

（2）内嵌式：

将css代码集中写在HTML文档的头部标签中，并且用

（3）链入式：

将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标签将外部样式表文件链接到HTML文档中，基本语法如下：

>

3.Css基础选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器，具体如下：

（1）标签选择器：

是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;

（2）类选择器：

使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

（3）Id选择器：使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

        #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

  1. //标签选择器
  2. div{
  3. width:300px;
  4. height:300px;
  5. }
  7. //类选择器
  8. .p{
  9. width:300px;
  10. height:200px;
  11. }
  13. //id选择器
  14. #p1{
  15. width:200px;
  16. height:200px;
  17. }

二、文本控制标签
1、Css字体样式属性

（1）font-size设置字号

（2）font-family设置字体

（3）font-weight定义字体粗细

（4）font-style定义字体风格

（5）font综合属性用于综合设置字体样式

（6）@font-face用于定义服务器字体

（7）word-wrap用于实现长单词和url地址的自动换行

2、Css文本外观属性

（1）color

用于定义文本的颜色，其取值方式有如下3种：

预定义的颜色值，如red，green，blue等。

十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

  1. div{
  2. color:#0000ffff;
  3. }

（2）letter-spacing

用于定义字间距，所谓字间距就是字符与字符之间的空白. 其属性值可为不同单位的数值，允许使用负值，默认为normal。

  1. div{
  2. letter-spacing:300px;
  3. }

（3）word-spacing

用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

  1. div{
  2. word-spacing:300px;
  3. }

（4）line-height

用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

  1. div{
  2. line-height:20px;
  3. }

（5）text-align

用于设置文本内容水平对齐，相当于html中的align对齐属性其.可用属性值如下：

left：左对齐（默认值）

right：右对齐。

center：居中对齐。

  1. div{
  2. text-align:center;
  3. }

（6）text-decoration

用于设置文本的下划线，上划线，删除线等装饰效果。其可用属性值如下：

none：没有装饰（正常文本默认值）。

underline：下划线。

overline：上划线。

line-through：删除线。

  1. div{
  2. text-decoration:none;
  3. }

（7）text-transform

用于控制英文字符的大小写。其可用属性值如下：

none：不转换（默认值）。

capitalize：首字母大写。

uppercase：全部字符转换为大写。

lowercase：全部字符转换为小写。

  1. div{
  2. text-transform:none;
  3. }

（8）text-indent

用于设置首行文本的缩进. 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

  1. div{
  2. text-indent:30px;
  3. }

（9）white-space

可设置空白符的处理方式。其属性值如下：

normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。

pre：预格式化，按文档的书写格式保留空格、空行原样显示。

nowrap：空格空行无效，强制文本不能换行，除非遇到换行标签
。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。

  1. div{
  2. white-space:normal;
  3. }

（10）text-shadow

可以为页面中的文本添加阴影效果。h-shadow用于设置水平阴影的距离，v-shadow用于设置垂直阴影的距离，blur用于设置模糊半径，color用于设置阴影颜色。 text-shadow: red 2px 5px 1px;

  1. div{
  2. text-shadow:none;
  3. }

（11）text-overflow

用于处理溢出的文本。

  1. div{
  2. text--overflow:clip;
  3. }

(12)word-wrap

用于实现长单词和URL地址的自动换行。属性如下：

normal：只在允许的断字点换行（浏览器保持默认处理）。

break-word：在长单词或 URL 地址内部进行换。

  1. div{
  2. word-wrap:normal;
  3. }

三、高级特性
1、Css复合选择器

（1）标签指定式选择器

又称交集选择器，由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3

  1. //标签指定选择器
  2. p.p1{
  3. font-family:楷体;
  4. }
  5. p#zs{
  6. color:#ffff0000;
  7. }

（2）后代选择器

选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

  1. //后代选择器
  2. body font{
  3. font-famiily:楷体;
  4. color:#ffff0000;
  5. }

（3）并集选择器

是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。

  1. //并集选择器
  2. .p1,.p2{
  3. color:red;
  4. }
2、Css层叠性和继承性

（1）、层叠性：多种CSS样式的叠加。

（2）、继承性：书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。

3、Css优先级

Eg.

文本的颜色

对应权重值：

p strong{ color:black}                                     /*权重为:1+1*/

strong.blue{ color:green;}                              /*权重为:1+10*/

.father strong{ color:yellow}                           /*权重为:10+1*/

p.father strong{ color:orange;}                       /*权重为:1+10+1*/

p.father .blue{ color:gold;}                             /*权重为:1+10+10*/

#header strong{ color:pink;}                          /*权重为:100+1*/

#header strong.blue{ color:red;}                    /*权重为:100+1+10*/

注：在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

（1）继承样式的权重为0。

（2）行内样式优先。

（3）权重相同时，CSS遵循就近原则。

（4）CSS定义了一个!important命令，该命令被赋予最大的优先级。

  1. //优先级 id选择器权重最高，所以只显示red颜色
  2. p{
  3. color:blue;
  4. }
  5. .p1{
  6. color:green;
  7. }
  8. #zs{
  9. color:red;
  10. }
4、属性选择器·

（1）E[att^=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。^插入符

（2）E[att$=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。与E[att^=value]选择器一样，E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。

（3）E[att*=value]选择器用于选择名称为E的标记，且该标记定义了att属性，att属性值包含value子字符串。该选择器与前两个选择器一样，E元素也可以省略，如果省略则表示可以匹配满足条件的任意元素。

  1. // 属性选择器 ^:开头含什么的修改
  2. p[name^=w]{
  3. color:red;
  4. }
  6. // $:结尾含什么的修改
  7. p[name$=x]{
  8. color:red;
  9. }
  11. // *:里面含什么的全部修改
  12. p[id*=ax]{
  13. color:red;
  14. }
5、关系选择器

关系选择器和前面讲的复合选择器类似，但关系选择器可以更精确的控制元素样式。CSS3中的关系选择器主要包括子元素选择器和相邻兄弟选择器，其中子元素择器由符号“>”连接，兄弟选择器由符号“+”和“~”连接

（1）子元素选择器：

主要用来选择某个元素的第一级子元素。

（2）相邻兄弟选择器

用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。

①邻近兄弟选择器：

该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。

②普通兄弟选择器：

使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。

  1. // 父与子，只能拿到父元素下的第一个子元素
  2. p>span{
  3. font-family:楷体;
  4. color:blue;
  5. }
  7. // 兄弟，只能拿第一个元素
  8. p+h1{
  9. font-family:楷体;
  10. color:blue;
  11. }
  13. // 普通兄弟
  14. p~span{
  15. font-family:楷体;
  16. color:blue;
  17. }

第四章  CSS4选择器

1.属性选择器

    E[att^=value] 选择前面为att的标签的选择器

    E[att$=value] 选择后面为att的标签的选择器

    E[att*=value] 选择含有att的标签的选择器

2.关系选择器

   子元素选择器：>

   兄弟选择器：+

   普通兄弟选择器：~

3.结构伪类化选择器

   root选择器：对页面所以元素都生效

   not选择器：排除某个元素下面的子元素结构

   only-child选择器：选择某个父元素只有一个子元素的选择器

   first-child选择器：选择父元素的第一个元素

   last-child选择器：选择父元素的最后一个元素

   not-child（n)选择器：选择某父元素下第几个子元素

   not-child（n)选择器：选择某父元素下倒数第几个子元素

   nth-of-type（n）选择器：选择父元素特定类型的第几个元素

   nth-last-of-type（n）选择器：选择父元素特定类型的倒数第几个元素

   ：empty选择器：选择没有子元素或文本的元素

4.伪元素选择器

   ：bedore选择器：在被选元素前插入内容，必须配合content使用

   ：affte选择器：在被选元素后插入内容，必须配合content使用

第五章 盒子模型

1.边框

边框样式 border-style: none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线

边框宽度 border-width:

边框颜色 border-color:

圆角边框 border-radius:

图片边框 border-images：

边框综合属性 border:宽度,样式,颜色;

2.内边距

内边距 padding 四边内边距 不允许使用负值

padding-top:上边距;

padding-right:右边距;

padding-bottom:下边距;

padding-left:左边距;

3.外边距

外边距 margin 四边外边距 允许使用负值

margin-top:上外边距;

margin-right:右外边距;

margin-bottom:下外边距;

margin-left:左外边距;

4.水平居中

margin:0 auto  /* 利用margin实现块元素水平居中*/

margin:5px auto  /* 利用margin实现块元素水平居中，并且上下拉开5像素边距*/

  1. *{
  2. margin:0; //清除页面内边距
  3. padding:0; //清楚页面外边距
  4. }
5.背景

背景颜色属性 background-color:

背景图片属性 background-image :

6.平铺

图像平铺属性 background-repeat

repeat 沿水平和竖直方向平铺

no-repaet 不平铺

repeat-x 只沿水平方向平铺

repeat-y 只沿竖直方向平铺

7.图像属性

图像位置属性 background-position

图像固定属性 background-attachment

Srcoll 图像随页面元素一起滚动（默认值）

Fixed 图像固定在屏幕上，不随页面元素滚动。

对背景与图片设置不透明度 rgba(r,g,b,alpha);

opacity：opacityValue;

0 完全透明

0.5 半透明

1 完全不透明

8.阴影

添加阴影效果 box-shadow属性

线性渐变效果 “background-image:linear-gradient（参数值）;”

在CSS3中，通过“background-image:repeating-linear-gradient（参数值）;”样式可以实现重复线性渐变的效果。

在CSS3中，通过“background-image:repeating-radial-gradient（参数值）;”样式可以实现重复线性渐变的效果。

在CSS3中，通过background-image、background-repeat、background-position和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。

9.块元素和行内元素

块元素

  • 在页面中以区域块的形式出现。
  • 每个块元素通常都会独自占据一整行或多整行。
  • 可以对其设置宽度、高度、对齐等属性。

行内元素

  • 不占有独立的区域。
  • 仅仅靠自身的字体大小和图像尺寸来支撑结构。
  • 一般不可以设置宽度、高度、对齐等属性。

disply-inile 块元素转换为行内元素

disply-block 行内元素转换为块元素

第六章 列表与超链接

一．无序链表ui   2有序链表ol  3定义链表dl  4链表的嵌套应用

1.无序链表tybe属性值

disc（默认值）实心圆 circle 空心圆 square 实心方块

2.有序链表相关属性

属性type

属性值 1 （项目符号显示为123…） a或A （项目符号显示为英文字母a b c d…或A B C…

） i或I (项目符号显示为罗马数字i ii iii…或I II III…)

属性 start

属性值 数字 （规定项目符号的起始值）

属性value

属性值 数字 （规定项目符号的数字）

3.自定义列表的基本语法格式

标签用于指定定义列表

标签用于指定术语名词

标签用于对名词进行解释和描述

4.列表嵌套示例
  1. <ul>
  2. // 子列表项中嵌套有序列表
  3. <li>咖啡
  4. <ol>
  5. <li>拿铁咖啡li>
  6. <li>摩卡咖啡li>
  7. ol>
  8. li>
  9. // 子列表项中嵌套无序列表
  10. <li>茶
  11. <ul>
  12. <li>龙井li>
  13. <li>铁观音li>
  14. ul>
  15. li>
  16. ul>

二．CSS控制列表样式
1.list-style-type属性  

list-style-type属性用于控制无序和有序列表的项目符号。

2.list-style-image属性

list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。    基本格式 ul{list-style-image:url(图片路径);}

3.list-style-position属性  

list-style-position属性用于控制列表项目符号的位置。

三．超链接标签
1.超链接标签

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可。

2.标签实例

文本或图像

四．链接伪类控制超链接
超链接标签的伪类含义
a:link{ CSS样式规则; }未访问时超链接的状态
a:visited{ CSS样式规则; }访问后超链接的状态
a:hover{ CSS样式规则; }鼠标经过、悬停时超链接的状态
a:active{ CSS样式规则; }鼠标点击不动时超链接的状态

第七章 表格与表单

1.表格
  1. <table> //定义表格
  2. <tr> //定义行
  3. <td>td> //定义单元格
  4. tr>
  5. table>

2.表格table属性

属性

描述

常用属性值

border

设置表格的边框（默认border="0"为无边框）

像素值

cellspacing

设置单元格与单元格边框之间的空白间距

像素值（默认为2像素）

cellpadding

设置单元格内容与单元格边框之间的空白间距

像素值（默认为1像素）

width

设置表格的宽度

像素值

height

设置表格的高度

像素值

align

设置表格在网页中的水平对齐方式

left、center、right

bgcolor

设置表格的背景颜色

预定义的颜色值、十六进制#RGB、rgb(r,g,b)

background

设置表格的背景图像

url地址

3.tr标签属性

PS:

1标签无宽度属性width，其宽度取决于表格标签

。

.2. 对

标签应用valign属性，用于设置一行内容的垂直对齐方式。

3. 虽然可以对

标签应用background属性，但是在标签中此属性兼容问题严重。

4.td标签属性

PS:

1. 在

无border样式属性，本书不再做具体的演示，初学者可以自己测试加深理解。

（2）绘制单元格边框

PS:

1. 行标签

无内边距属性padding和外边距属性margin。

2. 外边距属性margin对单元格无效，要想设置相邻单元格边框之间的距离，只能对

标签的属性中，重点掌握colspan和rolspan，其他的属性了解即可，不建议使用，均可用CSS样式属性替代。

2. 当对某一个

标签应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。

3. 当对某一个

标签应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。

表格结构

5.CSS控制表格样式

（1）绘制表格边框

  1. table{
  2. width:280px;
  3. height:280px;
  4. border:1px solid #F00; //设置table的边框
  5. }
  6. td.th{
  7. border:1px solid #F00; //为单元格单独设置边框
  8. }

PS：

1. border-collapse属性的属性值除了collapse（合并）之外，还可以为separate（分离），默认为separate。

2. 当表格的border-collapse属性设置为collapse时， HTML中设置的cellspacing属性值无效。

3. 行标签

标签应用HTML标签属性cellspacing。

6.表单

表单控件

7.input控件
  1. <form action="url地址" method="提交方式" name="表单名称">
  2.    
  3.     <input type="text">文本框
  4.     <input type="password">密码框
  5.     <input type="radio" name="sex">单选框
  6.     <input type="radio" name="sex">
  7.     <input type="checkbox">复选框
  8.     <input type="checkbox">
  9.     <input type="checkbox">
  10.     <input type="button" value="普通按钮">普通按钮
  11.     <input type="submit"><br>提交按钮
  12.     <input type="reset"><br>重置按钮
  13.     <input type="file"><br>选取文件
  14.     <input type="email">邮箱
  15.     <input type="url">网址
  16.    
  17.     请输入电话：<input type="tel" name="telephone" placeholder="请输入11位数字">
  18.     请输入搜索：<input type="search">
  19.     请输入颜色：<input type="color">
  20.     请输入数值：<input type="number" name="number1" value="0" min="1" max="20" step="4">
  21.     请输入年份：<input type="date">
  23.     请输入一个浏览器：<input type="text" list="wangzhi">
  24.     <datalist id="wangzhi">
  25.         <option value="Chrome">option>
  26.         <option value="Edge">option>
  27.         <option value="Opera">option>
  28.     datalist>
  29.    
  30.      姓名：<input type="text" required>
  31.           <input type="submit">
  32. form>
8.textarea控件
<textarea name="" id="" cols="30" rows="10">textarea>可以自行调整的框
9.select控件

  1. <form action="">
  2.     <select name="" id="">下拉菜单
  3.         <option value="">下拉1option>
  4.         <option value="">下拉2option>
  5.          <option value="">下拉3option>
  6.     select>
  7. form>

第八章：浮动

1.什么是浮动：

浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

浮动的基本语法格式是：选择器{float:属性值;}

属性有：left：元素向左浮动

Right：元素向右浮动

None：元素不浮动（默认值）

2.如何清除浮动：

基本语法格式是：选择器{clear:属性值;}

属性有：left：不允许左侧有浮动元素（清除左侧浮动的影响）

Right：不允许右侧有浮动元素（清除右侧浮动的影响）

Both：同时清除左右两侧浮动的影响

标签:
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿 站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）
相关文章
关注我们

扫一扫关注我们，了解最新精彩内容

搜索
排行榜
最近发表
标签列表