CSS基础笔记

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

晓弋风

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

阅读量225

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/zero_zhy/article/details/78202411

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS学习记录

一、定义和使用样式

1、常见CSS属性

1.1. background-color:设置元素背景颜色
1.2. border:设置围绕元素的边框
1.3. color:设置元素的前置颜色
1.4. font-size:设置元素文字的字号
1.5. height:设置元素的高度
1.6. padding:设定元素与边框的间距
1.7. text-decoration:设置元素文字的装饰效果，例如下划线
1.8. width:设置元素的宽度

2、使用元素内嵌样式

<a href="www.baidu.com" style="background-color:grey;color:white">baidu.com</a>

效果：
baidu.com

3、使用文档内嵌样式

<!DOCTYPE HTML>
<html>
    <head>
        <title>example</title>
        <style type="text/css">
            a {
                background-color:grey;
                color:white 
            }
            span {
                border:thin black solid;
                padding:10px
            }
        </style>
    </head>
    <body>
        <a href="www.baidu.com">baidu</a>
        <p>I like <span>Apple</span> and oranges</p>
    </body>
</html>

如图：

a {
background-color:grey;
color:white ;
}
span {
border:thin black solid;
padding:10px;
}

baidu.com

I like Apple and oranges

4、使用外部样式表

如新建styles.css

    a {
        background-color:grey;
        color:white 
        }
    span {
        border:thin black solid;
        padding:10px
        }

调用方式

<link rel="stylesheet" type="text/css" href="styles.css"></link>

在样式表中导入另一个样式，遵从后导入原则如：combined.css

import styles.css;
span {
        border:thin black solid;
        padding:10px
    }

然后用到的时候直接引用combied.css
注：可能需要声明样式编码格式，如
@charset “UTF-8”;

二、样式的层叠和继承

1、默认样式（浏览器自带的样式）

在我们没有定义样式的时候，浏览器默认显示的样式

2、用户样式（浏览器管理的样式）

浏览器一般有管理用户样式的方式，拿chrome来说，他会在用户的个人配置信息目录中生成一个名为Default/User Stylesheets\Custom.css的文件

3、样式层叠方式

3.1 样层叠顺序如下：

（1）元素内嵌样式
（2）文档内嵌样式
（3）外部样式
（4）用户样式
（5）浏览器样式

3.2 同级样式冲突

利用伪类、伪元素,给元素定义class或者id,正对这些class或者id去配置css属性.

<style type="text/css">
    a.astyle {
        color:blue;
    }
</style>
<a id="astyle">this is a</a>

4、继承

如果浏览器在直接相关的元素里面找不到某个属性的值，就会使用父元素的这个属性.如下面，span使用p的css属性

<style type="text/css">
    p {
        color:blue
    }
</style>
<p>I like<span>apple</span> and orange></p>

三、CSS的长度

1、绝对长度

单位表示符	说明
in	英寸
cm	厘米
mm	毫米
pt	英镑(1/12in)
pc	pica(12pt)

2、相对长度

单位表示符	说明
em	与元素字号挂钩
ex	与元素字体的“x高度”挂钩
rem	与根元素的字号挂钩
px	CSS像素(针对96dpi而言)
%	另一属性的值的百分比

晓弋风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础笔记

CSS学习记录一、定义和使用样式1、常见CSS属性1.1. background-color:设置元素背景颜色1.2. border:设置围绕元素的边框1.3. color:设置元素的前置颜色1.4. font-size:设置元素文字的字号1.5. height:设置元素的高度1.6. padding:设定元素与边框的间距1.7. text-decoration:设置元素文字的装饰效果
复制链接

扫一扫