Day4

最新推荐文章于 2024-06-14 22:48:58 发布

ChallengeFei

最新推荐文章于 2024-06-14 22:48:58 发布

阅读量2.3k

点赞数

文章标签：工学Day4

本文链接：https://blog.csdn.net/ChallengeFei/article/details/100884753

版权

课程目标:

CSS的发展历程

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着html的成长，为了满足前端工程的需求，html增加了很多显示功能，html变得混乱，html页面显得用臃肿，于是css诞生了

CSS 网页的美容师

CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。让我们的网页更加丰富多彩。

CSS的最大贡献就是：让 HTML 从样式中解脱苦海，实现了 HTML 专注去做结构呈现。

如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师

\没有不漂亮的女人，只有不会打扮的女人。

\没有不好看的网页，只有不会CSS的前端。

网页添加 CSS和不添加CSS 的对比

CSS初识

CSS(Cascading Style Sheets)

CSS通常称为CSS样式表或**层叠？**样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

h1{                 color: red;  font-size: 25px}
选择器(标签选择器)     属性：属性值 用分号连接  
属性="属性值" 用空格链接

需要注意的是
	1.排版结构   用段落对齐的排版书写css

CSS字体样式属性

font-size:字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。

相对长度单位	说明
em	相对与页面的尺寸
px	像素，最常用，推荐你使用
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{ font-family:“微软雅黑”;}

1.一般网页都是14px以上的字体
2.偶数字体字号，ie6等老式浏览器支持奇数会有bug
3.各种字体之间用英文状态下的逗号隔开
4.当字体是英文是，且有空格$#的时候，用双引号括起来
5.尽量使用系统默认字体，保证任何用户的浏览器都能正确显示

CSS Unicode字体

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。

Unicode,同一码，万国码，单一码，业界标准，它为每种语言的每个字符都设置一个唯一的二进制编码，以满足我们跨语言，跨平台进行文本转换，处理的要求

1.用英文表示

2.用unicode

3.一般用中文

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

font-weight:字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-weight的属性值

	normal,bold,lighter,100-900（100的整数倍）
700和boldr一样，400相当与normal

font-style:字体风格

字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

font:综合设置字体样式 (重点)

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

重要重要重要

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

开发者工具（chrome）

此工具是我们的必备工具，以后代码出了问题，我们首先第一反应就是：

“按F12”或者是 “shift+ctrl+i” 打开开发者工具。

菜单：右击网页空白出—查看

小技巧
  1.ctrl加滚轮键可以放大代码
  2.可以同时查看html，css代码
  3.css样式可以实时更改

选择器（重点）

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

基础选择器

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

标签名  {属性名1:属性值1；属性名2:属性值2；}

最大优点是快速为页面用类型的标签同一样式，也是他的缺点，不能设计差异化样式

类选择器

类选择器用"."(英文点号)进行表示，后面紧跟类名

.类名{属性名1:属性值1；属性名2:属性值2；}

类选择器最大优点就是可以为元素定义单独或相同的样式

1.长名称或词组可以使用中横线-为选择器命名
2.不建议使用下划线命名css选择器
	1.少按一个shift键
	2.区分js变量变量
	3.浏览器兼容问题，在IE6中 _tip无法生效的
3.不要用纯数字，中文命名，尽量用英文字母表示

课堂案例：Google

多类名选择器

可以为标签增加多个类名，从而达到更多选择目的

1.样式显示效果和html元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关
2.各个类名用空格连接

多类名选择器在后面项目常用到

id选择器

id选择器用"#"(英文点号)进行表示，后面紧跟id名

#id名{属性名1:属性值1；属性名2:属性值2；}

id是唯一的，只能对用文档中某一个具体的元素，id是html的id属性值，用法和类选择器类似

id选择器和类选择器区别

id相当身份证号(不得重复，只是用一次)，类选择器相当名字（多次重复使用）

最大的不同就是使用次数

通配符选择器

*{属性名1:属性值1；属性名2:属性值2}

所有选择器作用最广的，匹配所有元素

伪类选择器

伪类选择器添加一些特殊效果，比如选择第一元素，第n个元素

类选择器用 . 伪类用 :

链接伪类选择器

: link 未访问的连接

:visited 、以访问的连接

:hover 鼠标悬停

:active 选定的连接

注意写的时候，顺序不要颠倒，lvha, love hate

结构(位置)伪类选择器（CSS3)

目标伪类选择器(CSS3)

CSS注释

CSS规则是使用     /*  需要注释的内容  */  进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。

例如：

p {
  font-size: 14px;                 /* 所有的字体是14像素大小*/
}

CSS外观属性

color:文本颜色

color属性用于定义文本的颜色，其取值方式有3种：

line-height:行间距

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

一般情况下，行距比字号大7.8像素左右就可以了。

text-align:水平对齐方式

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

left：左对齐（默认值）

right：右对齐

center：居中对齐

text-indent:首行缩进

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

1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度

letter-spacing:字间距

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

word-spacing:单词间距

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

颜色半透明(css3)

文字颜色到了CSS3我们可以采取半透明的格式

文字阴影(CSS3)

以后我们可以给我们的文字添加阴影效果了 Shadow 影子

sublime快捷方式

sublime可以快速提高我们代码的书写方式

引入CSS样式表

CSS可以写到那个位置？是不是一定写到html文件里面呢？

内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

1.在html5中可以省略，但一般都会写上，比较规范

2.一般放在head标签内，也可以放在其他位置

行内式（内联样式）

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

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

外部样式表（外链式）

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

<head>
  <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

link单标签，放在头部head里面

1.herf，定义外部样式文件的URL，可以是相对路径，也可以是绝对路径

2.type，所连接文档的类型，text/CSS表示是一个css文件

3.rel 定义当前文档和所链接文档的关系，在这里需要指定stylesheet，表示链接的是一个样式表文件

三种样式表总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构的分离	较少	控制一个标签
内部样式表	部分结构和样式分离	没有完全分离	较多	控制一个页面的标签
外部样式表	完全实现样式和结构的分离	需要引入	最多，墙裂推荐	控制整个站点

标签显示模式（display）

标签的类型(显示模式)

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：

块级元素(block-level)

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

每个块级元素都占一行，可以设置宽高，对齐等属性，常用于网页布局和结构的搭建

块级元素的特点

总是从新行开始
高度，行高，外边距及内边距都可以控制
宽度都是容器的100%
可以容纳内联元素和其他块级元素

行内元素(inline-level)

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素(内联元素)并没有独立的空间，靠内容(文字，图片)来撑起结构的，一般不可以设置宽高，对齐等属性，常用域控制页面中的文本的样式

行内元素的特点:

和相邻的行内元素在同一行上
宽高无效，单水平方向的padding，margin可以设置的，垂直的无效
默认宽度就是本身内容的宽度‘
行内元素能容文本或其他行内元素

1.链接里面不可以放链接
2.行内元素不可以放块级标签

块级元素和行内元素区别

块级元素的特点

总是从新行开始
高度，行高，外边距及内边距都可以控制
宽度都是容器的100%
可以容纳内联元素和其他块级元素

行内元素的特点:

和相邻的行内元素在同一行上
宽高无效，单水平方向的padding，margin可以设置的，垂直的无效
默认宽度就是本身内容的宽度
行内元素能容文本或其他行内元素

行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点:

和相邻的元素(行内元素或行内块元素)在一行上，但之间会有空隙
默认宽度也本身内容的宽度
行高，宽高都可以控制

标签显示模式转换 display

块级元素转化行内元素

display:inline

行内转块级

display:block;

块级元素行内元素转行内块

display:inline-block;

CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

交集选择器

由两个选择器组成，标签选择器，第二个class选择器，两个选择器之间不能有空格

p .p1{
			color: red;
		}

交集用的比较少

并集选择器

并集选择器用逗号链接，任何形式的选择器都可以作为并集选择器的一部分

div,p{
		color: red;
	}

后代选择器

也称为包含选择器，用空格连接，子子孙孙都可以被选中

注意：把外层标签写在前面，内层标签写在后面，中间用空格分割

子元素选择器

只包含子元素，父级标签写在前面自己标签写在后面，中间用>连接

测试题

<div class="nav">    <!-- 主导航栏 -->
  <ul>
    <li><a href="#">公司首页</a></li>
	<li><a href="#">公司简介</a></li>
	<li><a href="#">公司产品</a></li>
	<li>
         <a href="#">联系我们</a>
		 <ul>
		    		<li><a href="#">公司邮箱</a></li>
		    		<li><a href="#">公司电话</a></li>
		 </ul>
	</li>
  </ul>
</div>
<div class="sitenav">    <!-- 侧导航栏 -->
  <div class="site-l">左侧侧导航栏</div>
  <div class="site-r"><a href="#">登录</a></div>
</div>
<style>
    .site-r a{
        color:red;
    }
    .nav ul li a{
        color: skyblue;
    }
    
</style>

在不修改以上代码的前提下，完成以下任务：

链接登录的颜色为红色,同时主导航栏里面的所有的链接改为蓝色
主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。
主导航栏里面的一级菜单链接文字颜色为绿色。

属性选择器

选取标签带有某些特殊属性的选择器我们称为属性选择器

div[class^=font]{
			color: red;
		}
		div[class$=font]{
			color: blue;
		}
		div[class*=font]{
			color: pink;
		}

标签名[属性名^=属性值]{ 属性名1：属性值1;

}

^起始位置

$结束位置

*任意位置

伪元素选择器（CSS3)

1.E::first-letter 文本的第一个单词或字

2.E::first-line文本第一行

3.E::selection，可以改变选中文本的样式

4.E::before 和E::after

在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，必须要结合content属性使用

伪类是一个冒号。伪元素是两个冒号

CSS书写规范

要养成良好的代码规范，这是专业化的开始

空格规范

【强制】选择器与{之间必须包含空格

.one { }

【强制】属性名与之后的:之间不允许包含空格，:与属性值之间必须包含空格

font-size: 12px;

选择器规范

【强制】当包含多个选择器时，每个选择器声明都必须独占一行

.one, .two, .three{ } 错误写法

.one, 正确写法

.two,

.three { }

【建议】选择器的嵌套层级不应该大于三级

属性规范

【强制】属性定义必须另起一行

【强制】属性定义后必须加上分号

CSS 背景(background)

CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）
background:背景颜色背景图片地址背景平铺背景滚动背景位置

背景图片(image)

语法：

background-image : none | url (url)

none 无背景图

url 背景图片的地址

背景平铺（repeat）

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

背景位置(position)

语法：

background-position : length || length

background-position : position || position

背景附着

语法：

background-attachment : scroll | fixed

背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

background:背景颜色背景图片地址背景平铺背景滚动背景位置

background: color url(image.jpg) repeat-y  scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

背景缩放(CSS3)

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

多背景(CSS3)

以逗号分隔可以设置多背景，可用于自适应布局做法就是用逗号隔开就好了。

一个元素可以设置多重背景图像。
每组属性间使用逗号分隔。
如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
为了避免背景色将图像盖住，背景色通常都定义在最后一组上，

凹凸文字

导航栏案例

ChallengeFei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day4

课程目标:CSS的发展历程从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着html的成长，为了满足前端工程的需求，html增加了很多显示功能，html变得混乱，html页面显得用臃肿，于是css诞生了CSS 网页的美容师CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。...
复制链接

扫一扫