0
点赞
收藏
分享

微信扫一扫

CSS简介、导入方式及选择器


目录

​​一、CSS简介​​

​​二、CSS导入方式​​

​​三、CSS选择器​​

​​四、CSS属性​​

一、CSS简介

CSS 是一种描述 HTML 文档样式的语言,CSS 描述应该如何显示 HTML 元素,用于控制网页表现的一种语言。

CSS(Casscading Style Sheet):层叠样式表

W3C标准:网页主要由三部分组成

结构:HTML

表现:CSS

行为:JavaScript

二、CSS导入方式

CSS导入HTML有三种方式:

1、内联样式:在标签内部使用style属性,属性值是css属性值对(不常用,html和css耦合在一块,不利于后期维护)

<div style="color: red">hello css</div>

2、内部样式:定义<style>标签,在标签内部定义css样式

    <style>
span{
color: red;
}
</style>

<span>hello css</span>

3、外部样式:定义link标签,引入外部的css文件

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

<p>hello css</p>

demo.css文件:

p{
color: red;
}

运行结果一样:

CSS简介、导入方式及选择器_css3

三、CSS选择器

概念:选择器是选取需设置样式的元素(标签)

div{color: red;}

分类:

1、元素选择器

元素名称{color:red;}

代码示例:

div{color: red;}

2、id选择器

#属性值{color:red;}

代码示例:

#name{color: blue;}

<div id="name">hello css2</div>

3、类选择器

.class属性值{color:red;}

代码示例:

.cls{color: pink;}

<div class="cls">div3</div>

四、CSS属性

1、字体、文本

font-size:字体大小

color:文本颜色

text-align:对齐方式

line-height:行高

2、背景

backgrou:

3、边框

border:设置边框,符合属性

4、尺寸

width:宽度

height:高度

5、盒子模型:控制布局

margin:外边距

padding:内边距

        默认情况下内边距会影响整个盒子的大小

        box-sizing:border-box;设置盒子的属性,让width和height就是最终盒子的大小

float:浮动

        left

        right

举报

相关推荐

0 条评论