CSS基础知识一

最新推荐文章于 2024-06-07 19:12:10 发布

师玉幺叔

最新推荐文章于 2024-06-07 19:12:10 发布

阅读量70

点赞数

分类专栏： web前端知识

本文链接：https://blog.csdn.net/weixin_45663954/article/details/117779980

版权

web前端知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.CSS简介

简介
1.CSS主要使用场景就是美化网页，布局页面
2.CSS最大的价值：友HTML专注做结构呈现，样式交给HTML, 即结构(HTML)和样式(CSS)分离
CSS的语法规范
选择器 {样式}
给谁修改样式 {改什么样式}

<!DOCTYPE html>
<html lang="en">
<head>
	<style>
	选择器 {键: 值; 键: 值;}
	</style>
</head>
</html>

CSS代码风格
1.样式格式书写：
a.紧凑格式
b.展开格式–提倡
2.样式大小写
提倡小写
3.空格规范
a.属性值前面，冒号后面，保留一个空格
b.选择器与大括号之间保留一个空格

2.CSS基础选择器

选择器的作用
主要用于选择标签
选择器的分类
a. 标签选择器：以HTML标签为选择器，缺点：不能差异化设置，只能统一设置同一类标签
b. 类选择器：单独选择一个或几个标签，可以使用类选择器

语法： .类名{ 属性1: 属性值1; 属性2: 属性值2; … }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础选择器之类选择器</title>
    <style>
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
        .start-sing {
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">冰雨</li>
        <li class="blue">来生缘</li>
        <li>李香兰</li>
        <li>生僻字</li>
        <li class="start-sing">江南</li>
    </ul>
</body>
</html>

c. 多类名：一个标签可以指定多类名

说明：class中，可以使用多个类名，类名之间用空格隔开，公共的样式放在同一个类中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础选择器之多类名选择器</title>
    <style>
        .red {
            color: red;
        }
        .font35 {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="red font35">刘德华</div>
    
</body>
</html>

d. id选择器

语法： #id名 { 属性1：属性值1; … }

1.口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用 2.id选择器与class选择器的区别：
##class相当于名字，可以多个，也可以被多个人使用
##id相当于身份证，只能唯一使用，不能重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础选择器之id选择器</title>
    <style>
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">迈克尔●杰克逊</div>
</body>
</html>

e. 通配符选择器：

语法： * { 属性1：属性值1; … }

会将所有标签统一修改样式–只有特殊情况才使用

3.CSS字体属性

a. font-family：定义文本的字体

语法： 选择器 { font-family: “字体1”, “字体2”, “字体3”, …; }

b. font-size：指定文本的大小，标题标签比较特殊，需要单独设置文字大小，单位px

语法： 选择器 { font-size: 20px; }

c. font-weight：设置字体的粗细，100-900,400相当于normal(变细)，700相当于bold(加粗)，不需要单位

语法： 选择器 { font-weight: 700; }

d. font-style：设置文本的风格，italic：文字倾斜，normal：不倾斜，最常用

e. font复合属性：font-style font-weight font-size/font-height font-family绝对不可用更换顺序，并且font-size font-family必须要有，否则font不生效

语法： 选择器 { /* font: font-style font-weight font-size/font-height font-family; */
font: italic 700 20px “微软雅黑”; }

4.CSS文本属性

作用
定义文本的外观，比如颜色、对齐文本、装饰文本、文本缩进、行间距等
a. color：用于定义文本的颜色，实际开发中，十六进制用的最多
b. text-align：对齐文本，只能是水平对齐，左对齐、右对齐、居中
c. text-decoration：装饰文本，没有线none–最常用，下划线underline–常用、删除线line-through、上划线overline等
e. text-indent：设置段落的首行缩进，2em，em是相当于当前元素的一个文字的大小，相对单位
f. line-height：行间距，控制文字的行与行之间的距离，单位px

5.CSS的引入方式

CSS可以分为三种样式表
a. 行内样式表(行内式引入)：在元素标签内部的style属性中设定css样式，可以控制当前的标签样式，使用较少–修改样式较少的情况下可以使用
b. 内部样式表(嵌入式引入)：将所有CSS代码抽取出来，放到<style></style>标签中，一般将<style>放到<head>中，控制整个HTML页面中的元素
c. 外部样式表：将样式单独写到CSS文件中，再引入CSS文件，控制多个页面，最常使用