CSS

  1. css是什么

  2. css怎么用

  3. css选择器

  4. 美化网页（文字，阴影，超链接，列表）

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画（特殊效果）

02 什么是css和发展史

cascading style sheet 层叠样式表

CSS：表现（美化网页）

字体，颜色，边距，高度，背景图片，网页定位，网页浮动

发展史：

css1.0

css2.0 div +css，html与css结构分离的思想

css2.1 浮动，定位

css3.0 圆角边框，阴影，动画....浏览器兼容性

03 快速入门及优势

style

css专注构建样式

注意html和css文件的格式

选择器

<!-- 规范：style可以编写css代码，每一个声明，最好使用分号结尾；
	语法：
		选择器{
			声明1；	
			声明2；
		}
-->
<head>
    <style>
        h1{
            color:red;      
        }
    </style>
</head>
<body>
    <h1 style="color:red;">
        我是标题
    </h1>
</body>

h1{
    color:red;      
}

<link rel="stylesheet" href="css/style.css" >

css的优势：

  1. 内容和表现分离
  2. 网页结构表现单一，可以实现复用
  3. 样式十分的丰富
  4. 建议使用独立于html的css文件
  5. 利用seo，容易被搜索引擎收录

Vue

4 三种css导入方式

头部的style

标签内部的style

优先级：行内样式 > 外部样式 > 内部样式（就近原则）

拓展：

外部样式两种写法

  • 链接式

    <!-- 外部样式 -->
<link rel="stylesheet" href="css/style.css">

  • 导入式

    @import 是CSS2.1特有的

    <style>
	@import url("css/style.css");
</style>

选择器：

作用：选择页面上的某一个或某一类元素

基本选择器

  1. 标签选择器

    选择一类标签

h1{
	color:red
}

  1. 类选择器

    选择所有class属性一致的标签，跨标签 .类名{}

<!-- 格式 -->
. class名{
    
}

  1. id选择器

    id必须保证全局唯一 #id

#id名称{
    
}
posted @ 2021-04-21 17:17  道可道非  阅读(60)  评论(0)    收藏  举报