day04，day05

最新推荐文章于 2023-10-08 20:46:55 发布

weixin_45615608

最新推荐文章于 2023-10-08 20:46:55 发布

阅读量139

点赞数

本文链接：https://blog.csdn.net/weixin_45615608/article/details/100889229

版权

day04，day05

什么是css

CSS(Cascading Style Sheets)

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

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

css字体样式属性

字号大小：font-size

font-size用于设置字体大小

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

字体：font-family

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如

p{ font-family:“宋体”;}

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

字体粗细：font-weight

用于加粗字体，（属性中为bold，normal,lighter,100-900）,700和boldr一样，400相当与normal

字体风格：font-style

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

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

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

字体样式综合设置

字体综合设置必须按照一定顺序，顺序如下

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

其中font-size和font-family属性不可省略

开发者工具（chrome）

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

选择器分类

标签选择器

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

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

类选择器

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

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

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

id选择器

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

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

id是唯一的

通配符选择器

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

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

伪类选择器

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

类选择器用

链接伪类选择器

: link 未访问的连接

:visited 、以访问的连接

:hover 鼠标悬停

:active 选定的连接

，顺序不能颠倒，lvha,

结构伪类选择器

li:first-child /* 选择第一个子元素 */

li:last-child /* 最后一个子元素 */

li:nth-child(n ) /* 选择第n个子元素 n 代表第几个的意思 */

目标伪类选择器

E：target id名，选择匹配E的所有元素，并且匹配元素被相关URL指向。目标伪类选择器是动态选择器，只有存在URL指向该匹配元素时，样式效果才会生效。

css注释

/* 注释内容 */

css外观属性

文本颜色：color

#ccc
rgb(0,0,255) 为蓝色

行间距：line-height

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

水平对齐方式：text-align

left:左对齐（默认）

right：右对齐

center：居中对齐

首行缩进：text-indent

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

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

字间距:letter-spacing

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

单词间距:word-spacing

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

颜色半透明

rgba(0,0,0,0.5) {前三个为颜色选择，取值0-255.第四个为透明度 0-1}

文字阴影

text-show(0px,0px,0px,#ccc){水平位置，垂直位置，模糊距离，阴影颜色}

引入css

引入方式

内部样式表

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

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

行内式（内联样式）

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

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

外部样式表（外链式）

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

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

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

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

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

三种样式表总结

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

标签显示模式

块级元素（block）

常见块级元素

~

、
、

、
、
、
等，

块级元素的特点

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

行内元素(inline)

常见的行内元素有<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 p{

}

子元素选择器

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

如

div>p

属性选择器

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

E[class^=val] 及类名开头有val的

E[class$=val] 及类名末尾有val的

E[class*=val] 及类名包含有val的

伪元素选择器（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背景

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

repeat 平铺

no-repeat 不平铺

repeat -x 水平平铺

repeat -y 垂直平铺

背景图片位置(position)

语法：

background-position : (left right center) ;

背景附着

语法：

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); {前三个为颜色选择，取值0-255.第四个为透明度 0-1}

背景缩放(CSS3)

其参数设置如下：

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

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

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

多背景(CSS3)

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

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

weixin_45615608

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day04，day05

day04，day05什么是cssCSS(Cascading Style Sheets)CSS通常称为CSS样式表或**层叠？**样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器...
复制链接

扫一扫