CSS笔记

CSS

一、CSS简介

1.什么是CSS?

CSS,Cascading Style Sheet层叠样式表

是一组样式设置规则,用于控制页面的外观样式

2.为什么使用CSS?

  • 实现内容与样式的分离,便于团队开发
  • 样式复用,便于网站的后期维护
  • 页面的精确控制,让页面更精美

3.CSS作用

  • 页面外观美化
  • 布局和定位

二、基本用法

1.CSS语法

<head>
	<style>
		选择器{
            属性名:属性值;
            属性名:属性值;
		}
	</style>
</head>
  • 选择器:要修饰的对象(东西)
  • 属性名:修饰对象的哪个属性(样式)
  • 属性值:样式的取值

2.CSS应用方式

也成为CSS引用方式,有三种方式:内部样式、行内样式、外部样式

2.1内部样式

也称为内嵌样式,在页面头部通过style标签定义

对当前页面当中所有符合样式选择器的标签都起作用

2.2行内样式

也称为嵌入样式,使用HTML标签的style属性定义

只对设置style属性的标签起作用

2.3外部样式

使用单独的CSS文件定义,然后在页面中使用<link标签>或者<@import指令>引入

  • 使用<link标签>链接外部样式文件(推荐使用)

    <link rel="stylesheet" type="text/css" href="css样式文件路径">
    

    type属性可以省略

  • <@import指令>导入外部样式文件

    <style>
    	@import	"css样式文件的路径";
    	@import url(css样式文件的路径);
    </style>
    

三、选择器

1.基础选择器

1.1标签选择器

也称为元素选择器,使用HTML标签作为选择器名称

以标签名作为样式应用的依据

1.2类选择器

使用自定义名称,以<.点号>作为前缀,然后通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用的依据

注意事项:

  • 调用时不能添加<.点号>
  • 同时调用多个类选择器时以<空格>分隔
  • 类选择器定义时,名称不能以数字开头

1.3ID选择器

使用自定义名称,以<#>号作为前缀,然后通过HTML标签的id属性进行名称匹配

以标签的id属性作为样式应用的依据,一对一的关系

发布了19 篇原创文章 · 获赞 0 · 访问量 313
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览