css学习笔记

 1 1.1 什么是 C C SS

 翻译为“层叠样式表”或者“级联样式表”, 简称样式表。

 1.2CS SS 的主要作用

 它主要是用来给 HTML 网页来设置外观或者样式 外观或者样式:HTML 网页中的文字的大小、颜色、字体,网页的背景颜色、背景图片!

 3 1.3 书写 C CS SS 的语法规则

 ,h1

 {color:red; fornt-size:14px; }

   Css 代码是由选择器和一对括号组成  大括号里面是由一条一条的声明语句组成  每一条语句都要使用英文装填下面的分号  每一句语句是由“key:values”组成  Css 中的属性值一般不加引号  在 CSS 中如果属性值为数值型数据的时候 一般情况需要加单位 单位一般都是 px  在 css 中不能出现 HTML 标签

 2.css 代码的书写方式 1 2.1 什么是书写方式

 Css 代码应该书写在什么地方!

 书写方式分为三种:嵌入式、外链式、行内式 2 2.2 嵌入式

 什么是嵌入式? Key values values Key 选择器 声明 声明

  将 css 代码嵌入到 HTML 文件中,嵌入式是通过 HTML 中<style>标签将 CSS 代码嵌入到HTML 网页中!(<style></style>标签一般情况下可以放在任意位置,但通常情况下放在<head>标签中) 语法规则:

 <head>

 <style

 type=”text/css”>

 /*书写 CSS 代码*/ 选择器{属性:值;属性:值;} </style> </head>

  Eg:

 如果我们使用的是 HTML5 的文档

 type 属性可以省略不写!

 3 2.3 什么是外链式?

 外链式是指单独写一个以 .css 为扩展名的文件,然后在<head></head>标签中使用<link />标签,将这个 css 文件链接到 html 文件中 注意:

 Css 文件不能单独的运行,必须依赖 HTML 文件!

 Link 标签可以有多个,一个 HTML 页面可以同时的引入多个单独的 CSS

  语法格式:

 <link rel=”stylesheet“ type=”text/css” href=”CSS 文件的地址“> 代码示例:

 我们一定要确认.css 文件被引入,怎么确认?

 4 2.4 什么是行内式?

 将 CSS 代码书写 HTML 标签的 style 属性中

  Style 是一个通用属性,每一个标签里面都拥有这个属性!

 语法格式:

  <标签名 style=”key:value;key:value;”></标签名>

 总结:

  使用嵌入式的方式来书写 css 代码,它只能作用域当前的 HTML 文件  使用外链式的方式来书写 css 代码,它可以作用于多个 HTML

 3. 注释 格式:

 /*注释内容*/ Sumlime 快捷键注释 Ctrl+Shift +/ 注意:

 Css 中只能使用/*

 */注释

 ❌<!--

 --> 不能使用

 4. 选择器 1 4.1 什么时选择器

 选择器是指通过一定的语法规则选取到对应的 HTML 标记,然后给这个对应的 HTML 标记设置样式 选择器分为四大类:基本选择器、复合选择器、伪类选择器、属性选择器

 2 4.2 基本选择器

  4.2.1 通用选择器:

 4.2.2 标签选择器:

 4.2.3 类选择器

  4.2.4Id 选择器

 3 4.3 复合选择器

  4.3.1 多元素选择器

 4.3.2 后代元素选择器

  效果:

 4.3.3 子元素选择器

  效果图:

 4.3.4 相邻元素选择器

  效果图:

 5 .尺寸样式属性

 Eg:

 问:<span></span>便签能够设置高度、宽度嘛? 答:不可以,因为 span 标签是一个行内元素,他不可以设置高度、宽度。只有块级元素才可以设置高度和宽度!

 6. 文本与字体属性 1 6.1 文本属性

  https://edu.aliyun.com/lesson_1895_16145#_16145

  2 6.2 字体属性

  7. 列表样式属性:

 这里的列表指的是:无序列表和有序列表 因为在整个网页布局中无序列表是使用的最多的。

  List_style_image:将列表前面的项目符号设置为一张图片

 它的值是::

 url(图片的地址) List-style:这个属性是一个简写属性 它集成了上面三个属性的功能。可以同时设置上面的三个属性。每一个属性值之前使用空格分隔!它的属性值可以有一个也可以有两个也可以三个。其属性值个数不定,位置也不定!

推荐访问:学习笔记 CSS