Study Day05-9.12

Study Day05-9.12 CSS第二天

  • 上学的学习
  • 引入CSS样式表
    • 内部样式表
    • 行内式(内联样式)
    • 外部样式表(外链式)
    • 三种样式表总结
  • 标签显示模式(display)
    • 块级元素(block-level)
    • 行内元素(inline-level)
    • 块级元素和行内元素区别
    • 行内块元素(inline-block)
    • 标签显示模式转换 display
  • CSS复合选择器
    • 交集选择器
    • 并集选择器
    • 后代选择器
    • 子元素选择器
    • 属性选择器
    • 伪元素选择器(CSS3)
  • CSS书写规范
    • 空格规范
    • 选择器规范
    • 属性规范
  • CSS 背景(background)
    • 背景图片(image)
    • 背景平铺(repeat)
    • 背景位置(position)
    • 背景附着
    • 背景简写
    • 背景透明(CSS3)
  • 下午的练习

上学的学习

引入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)

常见的块元素有

~

    1. 等,其中
      标签是最典型的块元素。

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

块级元素的特点

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

行内元素(inline-level)

常见的行内元素有等,
其中标签最典型的行内元素。

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

行内元素的特点:

  • 和相邻的行内元素在同一行上
  • 宽高无效,单水平方向的padding,margin可以设置的,垂直的无效
  • 默认宽度就是本身内容的宽度‘
  • 行内元素能容文本或其他行内元素
1.链接里面不可以放链接
2.行内元素不可以放块级标签

块级元素和行内元素区别

块级元素的特点

  • 总是从新行开始

  • 高度,行高,外边距及内边距都可以控制

  • 宽度都是容器的100%

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

行内元素的特点:

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

行内块元素(inline-block)

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

行内块元素的特点:

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

标签显示模式转换 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{ } 错误写法


.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);


下午的练习

1.今天学习的内容复习巩固
2.课上学习的代码自己多敲熟悉
3.制作一个简单的注册界面
4.制作一个简单的个人简历页面

你可能感兴趣的:(学习,日常)