技术文章 | Technical articles

前端培训机构—css源码笔记(一)

复习:

1. 列表

1.1 无序列表 ul-li

ul中只能嵌套li标签,lidiv一样,可以作为容器嵌套任何标签和文本

属性type属性值:

disc  实心圆

circle  空心圆

square  实心方块

1.2 有序列表 ol – li

属性:

type  设置列表项目符号的类型,默认阿拉伯数字

有且只有五个: 1  a  a   i  i

reversed  h5中属性,倒叙,布尔型属性写法有以下几种:

reversed

reversed = reversed

reversed=true

注意:ie浏览器不兼容

start 从第几个开始排序,属性值是数字

1.3 自定义列表 dl-dt-dd

<dl>

<dt>定义项1</dt>

<dd>描述项11</dd>

<dd>描述项12</dd>

<dd>描述项1n</dd>

 

<dt>定义项m</dt>

<dd>描述项m1</dd>

<dd>描述项m2</dd>

<dd>描述项mn</dd>

</dl>

2. 表格table

三个划分区域:thead àtfootàtbody

表格的标题:caption  注意浏览器差异性 

注意:一个表格只建议加一个caption,且位置紧跟在table开始标签后面

tr表示行  td(th)表示单元格,th默认加粗居中

table中属性:

border / bordercolor 设置边框和边框颜色

cellpadding 设置内容与边框之间的距离

cellspacing 设置边框之间的距离

width/height 设置宽高

bgcolor/background 设置背景颜色/背景图片

align 设置表格的整体水平对齐方式 left right center

summary 表格描述

tr中属性:

bgcolor/background / height

align 设置文本的水平对齐方式

valign 设置文本垂直对齐方式 top middle(默认) bottom

td中属性:

bgcolor/background / height/width/ align/ valign

rowspan 行合并;上下合并;

colspan 列合并;左右合并

3. 表单form

用来收集用户数据,并将其提交到对应地址。

属性:action  数据提交的地址

method 数据提交的方式  两种方式getpost

target 页面打开方式 _self    _blank

三个控件:input   textarea   select

input控件中type类型:

text   单行文本框

password 密码输入框

radio 单选框

checkbox 复选框

单选和复选name值要一致

属性 checked 默认被选中

file 文件域

image 图像域

button 普通按钮

submit 提交按钮

reset 重置按钮

hidden 隐藏

textarea 文本域控件

rows  设置行高

cols   设置列宽

注意:浏览器差异性

select下拉菜单控件

select-option

<select  multiple  size=”2”>

<option>选项1</option>

<option  seclected>选项2</option>

<option>选项m</option>

</select>

属性:

multiple  可以设置多选,按住ctrl + 鼠标点击

size 设置下拉列表在页面中显示的项数

selected 默认被选中的项

label标签用来和控件进行关联:

...

<tr>

<!-- label用来和控件进行关联,获取焦点,有以下两种使用方式 -->

<td><label for="username">*姓名</label></td>

<td><input type="text" id="username" placeholder="请输入姓名" /></td>

<td>*性别</td>

<td>

 <label><input type="radio" name="sex" value="male" checked="checked" /></label>

 <input type="radio" id="female" name="sex" value="female" /><label for="female"></label>

10  </td>

11 </tr>

12 ...

一、 CSS基础知识介绍

1.1 CSS介绍

CSSCacading Style Sheet 层叠样式表

引入CSS的目的:达到结构和样式的分离

引入CSS的好处:

结构与样式分离;

可以提供更多的样式;

减少html结构体量,可以提升加载速度;

便于后期的维护

提高SEO

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

<style type="text/css">

 ul{

  /*设置列表的项目符号 属性值 dsic  circle  square  decimal(1,2,3...)  upper-alpha/lower-alpha(大小写英文字母)

  upper-roman/lower-roman(大小写罗马数字) lower-greek(希腊) decimal-leading-zero(01,02,03...)

  none(清除项目符号)

  */

10    /*list-style-type: none;*/

11 

12    /*设置项目列表符号为 图片*/

13    /*list-style-image: url(./images/111.ico);*/

14 

15    /*清除列表项目符号*/

16    list-style:none;

17   }

18 

19   a{

20    color: yellowgreen;

21    /*去除下划线*/

22    text-decoration: none;

23   }

24  </style>

25 </head>

26 <body>

27  <ul>

28   <li><a href=""><font color="red">新闻 1</font></a></li>

29   <li><a href="">新闻 2</a></li>

30   <li><a href="">新闻 3</a></li>

31   <li><a href="">新闻 4</a></li>

32  </ul>

33 </body>

 

1.2一些样式回顾:

CSS组成:选择符  与  声明,声明又包括 多个 样式 与 属样式值 的集合

语法格式:

选择符{

样式:样式值;

}

样式可以有多个,样式之间使用 分号 隔开。

p{

/*设置文本样式*/

/*设置文本的颜色*/

color: orange;

/*设置文本字体的大小*/

font-size:20px;

/*设置文本的字体*/

font-family: Arial,"Mrcrosoft Yahei";

/*文本加粗效果 属性值100-900整百数  bold bolder lighter normal*/

10  font-weight: 600;

11  /*倾斜,斜体字  italic  normal*/

12  font-style: italic;

13  /*设置文本修饰*/

14  text-decoration: underline line-through overline none;

15  /*首行缩进*/

16  text-indent: 2em;

17  /*设置行高*/

18  line-height: 40px;

19  /*设置文本水平对齐方式  属性值 left  right  center  justify(分散对齐)*/

20    text-align: left;

21   }

 

二、 CSS的引入方式

2.1 行内样式

html开始标签中,通过style属性写入css文本

<ul style="list-style: none;color: blue;font-family: '楷体';">

<li>列表项1</li>

<li>列表项2</li>

</ul>

这种方式,css文本全部写入到了标签中,会影响页面的加载速度;html代码看起来特别不清爽;耦合性高

 

2.2 内嵌式

head标签内,通过style标签的方式添加css文本

<!-- 嵌入式:在head标签内,使用style标签添加css文本 -->

<style type="text/css">

 /*ul:标签选择器  {属性:属性值;}*/

 ul{

  /*清除列表项目符号*/

  list-style: none;

  /*改变字体的大小为20个像素*/

  font-size: 20px;

  /*字体加粗*/

10    font-weight: 600;

11   }

12  </style>

这种方式,虽然解决了不再标签中写样式的问题,耦合性也降低;但是还是没有完全达到结构和样式的分离

 

2.3 外链式

head标签内,使用link标签引入外部独立的CSS文件

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

<!-- 链接式:使用link标签引入外部的独立的CSS文件 -->

<link rel="stylesheet" type="text/css" href="./css/linkCss.css" />

</head>

Css文件:

/*CSS组成:选择器 和 声明组成  声明包括 样式 和 样式值*/

/* 语法  选择器{样式:样式值;} */

/*换行、空格存在的目的是为了提高代码的可读性*/

ul{

/*清除默认的外边距*/

margin:0;

/*清除默认的内边距*/

padding: 0;

}

10 

11 li{

12  /*设置列表项目符号为方块*/

13  list-style: square;

14 }

这种方式解决了上面的所有问题,工作中也是使用这种方式。

 

2.4 导入式

head标签中,在style标签中,使用@import url();导入外部的css文件

<!-- 导入式:style标签中,使用@import导入外部的样式CSS文件 -->

<style type="text/css">

 /*@import url('./css/importCss.css');*/

 @import './css/importCss.css';

</style>

  导入式和外链式极为相似,都是引入外部的独立css文件;但是,导入式会影响页面的加载速度,页面加载是会先闪一下,再正常,所以在工作中为了提高用户体验,一般不使用这种方式。

2.5 几种引入方式的优先级:就近原则(所写的选择器和样式一致的情况下,谁离着文本近,显示谁的样式值)

 

三、 选择器

语法:

选择器{

样式:样式值;

}

3.1 基本选择器

标签选择器:

直接使用标签名来匹配元素

一般情况下,会使用标签选择器来清除一些默认的样式

/*标签选择器p.会匹配页面中所有的p标签元素*/

p{

margin: 0;

}

 

类选择器:

使用 .className(.类名)来匹配对应的元素

类名命名:一般由字母、_、数字、- 组成,数字不能开头

可以用来给部分标签,设置相同的属性(应用:设置公共<原子>类)

一个类可以有多个类名,多个类名之间使用空格隔开

一个类可以给多个元素添加

一个类可以给不同的标签使用

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

<style type="text/css">

 /*类选择器:.类名*/

 .kt{

  font-family: "楷体";

 }

10   .orange{

11    color: orange;

12   }

13 

14   .size30{

15    font-size: 30px;

16   }

17 

18   /*注意:类名的命名不能以数字开头*/

19   /*.123abc{

20    font-weight: bolder;

21   }*/

22 

23   /*注意:不建议使用汉字命名类名,不标准*/

24   /*.宋体{

25    font-family: "宋体";

26   }*/

27 

28   /*类名命名:一般由字母、_、数字、- 组成,数字不能开头*/

29 

30   /*.-haha{

31    /*设置字体风格为斜体字

32    font-style: italic;

33   }*/

34  </style>

35 </head>

36 <body>

37  <h3>类选择器演示</h3>

38  <p>p标签本身具有默认的格式,段落之间的间距比较大</p>

39  <p>p标签本身具有默认的格式,段落之间的间距比较大</p>

40  <p class="orange size30 kt">p标签本身具有默认的格式,段落之间的间距比较大</p>

41  <p>p标签本身具有默认的格式,段落之间的间距比较大p标签本身具有默认的格式,段落之间的间距比较大p标签本身具有默认的格式,段落之间的间距比较大p标签本身具有默认的格式,段落之间的间距比较大p标签本身具有默认的格式,段落之间的间距比较大p标签本身具有默认的格式,段落之间的间距比较大p标签本身具有默认的格式,段落之间的间距比较大p标签本身具有默认的格式,段落之间的间距比较大p标签本身具有默认的格式,段落之间的间距比较大p标签本身具有默认的格式,段落之间的间距比较大</p>

42  <p>p标签本身具有默认的格式,段落之间的间距比较大</p>

43  <p class="宋体">p标签本身具有默认的格式,段落之间的间距比较大</p>

44 </body>

 

 

ID选择器

使用 #id名 来匹配对应的元素

id命名和组成同 class

ID具有唯一性,也就是说一个标签只能有一个属于自己的id识别

一个id只能设置一个值

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

<style type="text/css">

 /*id选择器: #id*/

 #kt{

  /*设置字体为楷体*/

  font-family: "楷体";

 }

10 

11   #red{

12    color: red;

13   }

14  </style>

15 </head>

16 <body>

17  <h3 id="kt">类选择器演示</h3>

18 </body>

通配符(全局选择器)

*{样式:样式值;

通配符可以匹配包括body在内的所有的标签

一般情况下,使用通配符来清除一个全局的样式

*{

  /*清除默认外边距*/

  margin: 0;

  /*清除默认内边距*/

  padding: 0;

 }

 

样式的层叠性:给同一个标签设置idclass,然后给它选择器 (idclass、标签)设置同样的一个样式,

那么他们就层叠

 

web前端视频教程,请添加微信“haomei0452”免费领取


微信个人号二维码.jpg

关注微信公众号“icketang”,获取最新前端资讯,学习资料

B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg


上一篇文章: 前端培训—html源码笔记 第二天
下一篇文章: web前端培训—css源码笔记(二)

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>