CSS入门

Venus枯草

于 2021-07-27 00:08:55 发布

阅读量828

点赞数 1

分类专栏： Java学习记录文章标签： css

本文链接：https://blog.csdn.net/weixin_44696477/article/details/119121526

版权

Java学习记录专栏收录该内容

30 篇文章 2 订阅

订阅专栏

简介

层叠样式表(英文全称：Cascading Style Sheets)

层叠：多个样式可以作用在同一个html的元素上，同时生效
是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
样式定义如何显示 HTML 元素
样式通常存储在样式表中
内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS的使用：与html结合

行内样式

内联样式：通过 style 直接在标签中编写样式
只对当前标签生效，没有做到内容和样式分离

内部样式

定义在 head 标签中，通过 style

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内部样式</title>
        <style>
            div{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

只对当前页面生效

外部样式

提前定义 css 资源文件
就近原则（行内>内部>外部），叠加显示
在head标签内，定义link标签引入外部样式
lina.css文件，放在与html页面同级的css文件夹中：

    div {
     color: red;
    }

html页面中的引入

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>外部样式</title>
            <link rel="stylesheet" href="css/lina.css" />
        </head>
        <body>
            <div>hello my css</div>
        </body>
</html>

语法

基本格式：

选择器:筛选具有相似特征的元素
多条声明：属性和属性值之间用冒号分割，不同的属性之间用分号隔开。


选择器 {
属性1:值1;
属性2:值2;
...
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i7QtgoGi-1627315719498)(en-resource://database/1201:1)]

注释：

CSS注释以 /* 开始, 以 * / 结束

基本选择器

筛选具有相似特征的元素

id选择器

选择具有相同 id 属性值的元素，建议 html 页面中的 id 值唯一

ID属性不要以数字开头
不能描述多个元素

class选择器

选择具有相同class属性值的元素

描述一组元素的样式，可以在多个元素中使用
类名不能以数字开头
html： class ； css： . 开头

元素/标签选择器

选择具有相同标签名称的元素
定义选择器语法：
标签名称{};

常用样式

color 字体颜色

1、颜色的单词 red blue…
2、rgb(红，绿，蓝)三色的取值范围是0-255 rgb(255,0,0)
rgba（红，绿，蓝,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
3、# + 值1值2值3 ：值的范式是00-FF 十六进制数字组成的例如：#FF0000

width、height

只有块状元素可以设置宽高
取值方式：
1.数值：像素px
2.百分比：相对于父元素的百分比

Venus枯草

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门

简介层叠样式表(英文全称：Cascading Style Sheets)层叠：多个样式可以作用在同一个html的元素上，同时生效是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。样式定义如何显示 HTML 元素样式通常存储在样式表中内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个CSS的使用：与html结合行内样式内联样式：通过 style 直接在标签中编写样式只对当前标签生效，没
复制链接

扫一扫