CSS层叠样式表

leriger

于 2023-09-30 18:30:12 发布

阅读量74

点赞数 4

文章标签： css 前端

本文链接：https://blog.csdn.net/leriger/article/details/133419127

版权

一、CSS简介

标记语言，设置文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式

语法规范：

CSS规则由两个重要的部分构成：选择器以及一条或多条声明

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式

属性是对指定的对象设置的样式属性

属性和属性值之间用:分开

多个键值对之间用;区分

二、CSS基础选择器

作用：选择标签

选择器分类：基础选择器和符合选择器

基础选择器由单个选择器组成

基础选择器又包括标签选择器、类选择器、id选择器、通配符选择器

标签选择器

用HTML标签名作为选择器，按标签名称分类，为某一类标签指定统一的CSS样式

标签名 {
    属性1: 属性值;
    属性2: 属性值;
    属性3: 属性值;
}

类选择器

单独选择某一个或几个标签

.类名 {
    属性1: 属性值1;
}

用class属性来调用类

<p class="red">hap</p>

.red {
            color: red;
        }

长名称或词组可以使用中横线命名

多类名：给一个标签指定多个类名，这些类名都可以选出这个标签

<div class="red font30">kjfhg</div>

多个类名用空格分开

id选择器

可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义

#id名 {
    属性1：属性值1;
    ...
}

<div id="hh">哈哈</div>

#hh {
    color: pink;
}

与类选择器的区别：id选择器一个id只能调用一次，下面重名的不能用。类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

通配符选择器

使用“*”定义，选取页面中所有元素标签

* {
    属性1：属性值1;
    ...
}

不需要调用，自动给所有元素使用样式

特殊情况使用以下代码，（清除所有元素标签的内外边距）

* {
    margin: 0 ;
    padding: 0;
}

三、CSS字体属性

1.字体系列font-family

多个字体之间用“，”分割（如果第一个没安装，就执行第二个，以此类推）

如果有空格隔开的多个单词组成的字体，加单引号

可以给整个body指定字体

2.字体大小font-size

单位：px（像素），谷歌浏览器默认文字大小为16px，可以给body指定整个页面文字的大小

3.字体粗细font-weight

属性值：normal，正常字体，number为400；bold,粗体，number为700；bolder，IE5+特粗体；lighter，IE5+细体；number，IE5+100|200|300|400|500|600|700|800|900，数字后不要加单位，提倡使用数字

4.文字样式font-style

属性值：normal，默认值，浏览器会显示标准的字体样式；italic，浏览器显示斜体的字体样式

平时很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜的字体

5.字体复合属性

将以上文字样式综合来写，节约代码

body {
    font: font-style font-weight font-size/line-height font-family;
}

按此顺序写属性的属性值

不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

四、CSS文本属性

定义文本的外观样式

1.文本颜色color

div {
    color: red;
}

表示	属性值
预定义的颜色值	red，green，blue。。。。
十六进制	#FF0000,#FF6600,#29D794,最常用
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

2.文本对齐text-align

属性值：left，right，center

3.文本装饰text-decoration

属性值：none，默认，没有装饰线，最常用；underline，下划线，链接a自带下划线，常用；overline，上划线，基本不用；line-through，删除线，不常用

4.文本缩进text-indent

指定文本的第一行的缩进，通常是将段落的首行缩进

p {
    text-indent: 20px;
}

若属性值写的是2em，则是缩进当前元素2个文字大小的距离。em是一个相对单位，当前元素1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小

5.行间距line-height

属性值：像素值

行间距由上间距+文本高度+下间距

五、CSS引入方式

1.CSS的样式表

按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类：

行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）

1.1内部样式表

一般写到<head>的<style>里

方便控制当前整个页面中的元素样式设置，代码结构清晰，但没有实现结构与样式的完全分离

1.2行内样式表

在元素表情内部的style属性中设定该标签的CSS样式，适于修改简单样式

可以控制一个页面

<div style=“color: red; font-size: 12px;”>qwert</div>

1.3外部样式表-推荐

样式单独写到CSS文件中，之后把CSS文件引入HTML页面

<link rel=“stylesheet” href=“css文件路径”>

可以控制多个页面