day4_成仙路多枯骨-CSDN博客

本文链接：https://blog.csdn.net/weixin_45615605/article/details/100889185

day04,day05

css

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

css样式规则

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

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

css字体样式属性
- font-size(字号大小)
  
  font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。
  
  相对长度单位说明
  em 相对与页面的尺寸
  px 像素，最常用，推荐你使用
  绝对长度单位说明
  in 英寸
  cm 厘米
  mm 毫米
  pt 点
- font-family(字体)
```
1.一般网页都是14px以上的字体
2.偶数字体字号，ie6等老式浏览器支持奇数会有bug
3.各种字体之间用英文状态下的逗号隔开
4.当字体是英文是，且有空格$#的时候，用双引号括起来
5.尽量使用系统默认字体，保证任何用户的浏览器都能正确显示
```

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

font-weight(字体粗细)

font-weight的属性值

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

font-style(字体风格)
- normal：默认值，浏览器会显示标准的字体样式。
  
  italic：浏览器会显示斜体的字体样式。
  
  oblique：浏览器会显示倾斜的字体样式。

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

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

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

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

开发者工具（chrome）

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

选择器
- 类选择器
```
标签名  {属性名1:属性值1；属性名2:属性值2；}
```
- 标签选择器
  - ```
  .类名{属性名1:属性值1；属性名2:属性值2；}
```
- ```
1.长名称或词组可以使用中横线-为选择器命名
2.不建议使用下划线命名css选择器
	1.少按一个shift键
	2.区分js变量变量
	3.浏览器兼容问题，在IE6中 _tip无法生效的
3.不要用纯数字，中文命名，尽量用英文字母表示
```
- 多类名选择器
  - 可以赋予多个类名。
  - ```
  1.样式显示效果和html元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关
  2.各个类名用空格连接
```
- id选择器
  #id名{属性名1:属性值1；属性名2:属性值2；}
```
2. id唯一，只能对应一个具体元素

 
```
- 通配符选择器
  - 作用最广，但是优先级较低
  - ```
  *{属性名1:属性值1；属性名2:属性值2}
```
- 伪类选择器
  - 伪类选择器添加一些特殊效果，比如选择第一元素，第n个元素
    
    类选择器用 . 伪类用 :
- 链接伪类选择器
  - : link 未访问的连接
    
    :visited 、以访问的连接
    
    :hover 鼠标悬停
    
    :active 选定的连接
    
    注意写的时候，顺序不要颠倒，lvha, love hate
- 结构(位置)伪类选择器（CSS3)
  - li:first-child
    li:last-child
    li:nth-child(4)
  - p::first-letter
    p::first-line
    
    p::selection
    
    div::befor
    div::after
- 目标伪类选择器(CSS3)
  - E：target
- css注释
  - /* 需要注释的内容 */
- css外观属性
  - line-height:行间距
    
    一般情况下，行距比字号大7.8像素左右就可以了。
  - text-align:水平对齐方式
  - text-indent:首行缩进
  - letter-spacing:字间距
    
    允许使用负值，默认为normal。
  - word-spacing:单词间距
    
    允许使用负值，默认为normal。
  - 文字阴影(CSS3)
    
    shadow

day05

引入css样式表

内部样式表

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

行内式（内联样式）

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

外部样式表（外链式）

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

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

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

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

样式总结

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

标签显示模式（display）

html标签一般分为块和行内，也可以叫块元素和行内元素。

块级元素（block）

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

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

块级元素的特点

1.总是从新行开始

2.高度，行高，外边距及内边距都可以控制

3.宽度都是容器的100%

4.可以容纳内联元素和其他块级元素

行内元素(inline)

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

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

行内元素的特点:

1.和相邻的行内元素在同一行上

2.宽高无效，单水平方向的padding，margin可以设置的，垂直的无效

3.默认宽度就是本身内容的宽度‘

4.行内元素能容文本或其他行内元素

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

块级元素和行内元素区别

同上边两个特点

行内块元素（inline-block）

常见的行内块元素<img />、<input />、<td>，可以给他们设置宽高和对齐属性

行内块元素的特点:

1.和相邻的元素(行内元素或行内块元素)在一行上，但之间会有空隙

2.默认宽度也本身内容的宽度

3.行高，宽高都可以控制

标签显示模式转换 display

块级转化为行内 display:inline

行内转块级 display:block;

块级元素行内元素转行内块 display:inline-block;

css符合选择选择器

交集选择器

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

p.p1{
			color: red;
		}

并集选择器

用逗号连接

div,p{
		color: red;
	}

后代选择器

用空格连接

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

子元素选择器

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

属性选择器

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 { }

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

属性规范

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

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

CSS 背景(background)

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

背景图片(image)

background-image : none（没有背景图） | url (url)（背景图片的地址）

背景位置(position)

background-position : （left right center）

背景平铺（repeat）

background-repeat : repeat（平铺） | no-repeat（不平铺） | repeat-x（x轴平铺） | repeat-y （y轴平铺）

背景附着

background-attachment : scroll | fixed

scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

背景透明(CSS3)

background: rgba(0,0,0,0.3); （0.3为透明度）

背景缩放(CSS3)

1.可以设置长度(px)或者百分比(%)

2.使用cover，自动调整缩放比例充满背景区域，溢出会被隐藏。

3.contain 会自动调整缩放比例，保证图片完整显示

多背景(CSS3)

用逗号风格可以设置多背景

1.一个元素可以设置多重背景图像

2.属性用逗号分隔

3.如果有交集，前面的背景图会覆盖在后面的上面

4.为了避免背景色覆盖图像，背景色通常定义在最后一组。

凹凸文字

用shadow可以设置。