CSS基础属性（学习笔记）

吲哚亦轩

已于 2024-03-13 21:29:44 修改

阅读量747

点赞数 21

分类专栏：网页开发文章标签： css 学习笔记

于 2024-03-13 15:02:40 首次发布

本文链接：https://blog.csdn.net/m0_68637281/article/details/136674411

版权

网页开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、CSS介绍

CSS即层叠样式表/级联样式表，简称样式表

html：写网页结构内容

css：写网页样式

实现了内容与表现的分离，提高了代码的重用性和维护性

CSS注释不被浏览器解析，给开发人员一个标注

快捷键：ctrl+/

语法：/* 注释的内容 */

二、CSS特点

1）继承性

子元素可以继承祖先元素的样式，如果子元素有自己的样式，就不继承（不是所有样式都有继承性）

有继承性的样式：color、font-*、text-*、line-height

2）层叠性

一个元素可以多次设置同一个样式

3）优先级

样式冲突，优先级高的样式生效，优先级相同，后写的生效

三、CSS语法

选择器{

属性:属性值;

属性:属性值;

属性:属性值;

}

说明：

选择器：选中写样式的元素

最后一个键值对的分号可以省略

常见CSS属性

width:; 元素的宽度

height:; 元素的高度

background-color:; 背景颜色

color:; 字体颜色

float:left; 左浮，块级元素水平显示

四、引入方式

4.1 行内样式内联样式

利用HTML的style属性（除了br，其他所有元素都有的属性），style的属性值是css样式

 <div style="width: 200px;height: 200px;background-color: red;"></div>

缺点：只对当前元素生效，代码重用性低，不利于开发和维护

4.2 内部样式

利用style标签，推荐写在head中


        <head>
    <style>
        /* css地盘 */
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }

    </style>
        </head>

缺点：只对当前页面生效

4.3 外部样式

利用link标签，写在head中

步骤：

1）新建.css文件

2）在HTML文件中引入css文件
        <head>

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

        </head>
3）HTML写结构，css写样式

优点：实现了内容与表现的完全分离，提高了代码的重用性和维护性

4.4. 优先级

行内样式 > 内部样式(外部样式)

内部样式和外部样式优先级相同，后写的生效

2.5. 导入式(了解)

css文件中引入css

1）语法

        <style>

            @import "css文件的路径";

        </style>

2)link和@import的区别

①加载顺序不同，link是同时加载HTML文件和css文件，@import是先加载HTML文件，再加载css文件

②兼容性问题，link没有兼容性，@import IE5以下不支持

③link还可以引入其他内容，@import只能引入css

引入网页图标：<link rel="icon" href="图标路径">

图标一般大小是16X16

④js只能操作link引入的样式，@import引入的样式js不能操作

五、选择器

作用：选中写样式的元素

5.1 基础选择器

1）全局选择器通用选择器

        *{
            color: red;
        }

范围：选中页面所有的元素，当所有元素有共同的样式可以使用

2）元素选择器

所有html元素都可以是元素选择器

div{}

p{}

a{}

img{}

input{}

h3{}

        div{
            color: green;
        }

范围：选中所有指定的元素

3）类选择器

利用html的class属性，除了br，其他元素都有的属性

.className{}

注意：类名可以重复，一个class可以起多个名字，用空格隔开，不区分前后顺序

小驼峰命名法：第一个单词首字母小写，其余单词首字母大写

4）ID选择器

利用html的id属性，除了br，其他元素都有的属性

#idName{}

注意：id具有唯一性

class和id的命令规则：

①可以包含数字、字母、_、-

②不可以以数字开头

③区分大小写

④建议起有意义的名字

5）优先级

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 全局选择器

权重：1000 100 10 1

6）合并选择器

选择器1,选择器2,...{

共同的样式

}

六. HTML通用属性

除了br，其他元素都有的属性

1）style：行内样式

2）class：类选择器

3）id：ID选择器

4）title：鼠标悬停给予提示

七. 字体属性（有继承性）

1）字体颜色

 color:red;

2）字体大小

font-size:16px;

浏览器默认字体大小为16px，支持的最小字体为12px

3）字体粗细

 font-weight:normal;

默认值normal--不加粗

取值bold--加粗、100-900(400=normal,700=bold)

4）字体倾斜

font-style:italic;

默认值normal，取值italic--倾斜

5）字体

 font-family:宋体,楷体,微软雅黑;

默认为微软雅黑 ,可以取多个字体，用逗号隔开，从左往右支持，当字体包含多个英语单词，必须加引号

颜色的取值

1）关键词 red green pink等

2）十六进制包含【0-9，a-f，A-F】 #000000：黑色，简写#000 #ffffff：白色，简写#fff

3）rgb(,,) 取值0-255 rgb(0,0,0):黑色 rgb(255,255,255):白色

4）rgba(,,,) a：透明度，取值0-1,0：完全透明，1：不透明，0.5=.5、 0.18=.18

八. 文本属性 (有继承性)

1）元素内容的水平对齐方式

text-align:left|center|right;

可以设置文字、行内元素在容器中水平排列方式（块元素不行）

2）文本装饰

text-decoration:;text-decoration:;

none:不显示

underline：下划线

overline：上划线

line-through:删除线

3）英文字母大小写

/体全部转换为大写*/
/text-transform:uppercase;
/全部转换为小写*/
/*text-transform:Lowercase;
*/
/体每，个单次的首字母大写*/
text-transform:capitalize;

吲哚亦轩

关注

21
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
CSS基础属性（学习笔记）

CSS即层叠样式表/级联样式表，简称样式表html：写网页结构内容css：写网页样式实现了内容与表现的分离，提高了CSS注释不被浏览器解析，给开发人员一个标注快捷键：ctrl+/语法：/* 注释的内容 */
复制链接

扫一扫