CSS day1

最新推荐文章于 2024-07-08 22:40:20 发布

Lonely King

最新推荐文章于 2024-07-08 22:40:20 发布

阅读量75

点赞数

分类专栏： HTML+CSS+JS基础知识文章标签： html

本文链接：https://blog.csdn.net/qq_38353711/article/details/109597730

版权

HTML+CSS+JS基础知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第一章

1.CSS初始

CSS(Cascading Style Sheets) 通常称为CSS样式或层叠样式表，主要用于版面的布局和外观显示样式，网页的美容师

2.引入CSS样式表

2.1.行内样式(内联样式)

通过标签的style属性设置元素的样式

<h1 style="color:pink;font-size:12px;">行内样式表</h1>

只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余

没有实现结构与样式分离

2.2.内部样式表(内嵌样式表)

是将CSS代码集中写在HTML文档的head头部标签中，并用style标签定义

只能控制当前页面

没有彻底分离

<head>
    <style type="text/css">
        div {
          color:red;
          font-size:12px;   
        }
    </style>
</head>

2.3.外部样式表(外链式)

是将所有的样式放在一个或者多个以.CSS为扩展名的外部样式表文件中

通过link标签将外部样式表文件链接到HTML文档中

实现了结构与样式完全分离，样式共享

3.选择器

用于选择标签，把我们想要的标签选择出来，选对人，做对事

3.1.基础选择器

标签选择器(元素选择器)：能够快速为页面中同类型的标签统一样式，不能够差异化样式。

类选择器

类选择器是可以多次重复使用

<head>
<style type="text/css">
    .blue {
        font-size:100px;
        color:blue;
    }
    .red {
        color:red;
    }
</style>
</head>
<body>
    <span class="blue">G</span>
    <span class="red">O</span>
    <span>O</span>
    <span>g</span>
    <span>l</span>
    <span class="red">e</span>
</body>

多类名选择器

<head>
<style type="text/css">
    .blue {
        font-size:100px;
        color:blue;
    }
    .red {
        color:red;
    }
    .font100 {
        font-size:100px;
    }
</style>
</head>
<body>
    <span class="blue font100">G</span>
    <span class="red">O</span>
    <span>O</span>
    <span>g</span>
    <span>l</span>
    <span class="red">e</span>
</body>

id选择器

id元素是唯一的，只能对应于文档中某一个具体的元素。

id选择器与类选择器最大的区别在于使用次数

<head>
<style type="text/css">
    #blue {
        font-size:100px;
        color:blue;
    }
    #red {
        color:red;
    }
</style>
</head>
<body>
    <span id="blue">G</span>
    <span id="red">O</span>
    <span>O</span>
    <span>g</span>
    <span>l</span>
    <span>e</span>
</body>

通配符选择器

通配符选择器用*表示，*表示所有的标签，会匹配页面所有元素，不建议随便使用

* {
    pading:0;   /*内边距为0*/
    margin:0;   /*外边距为0*/
}

4.font字体

font-size:12px 字体大小

font-family:"Microsoft Yahei" 字体样式

font-weight: normal 默认值为normal，bold加粗，100-900 400等于normal，700等于bold （字体粗细）

font-style: normal 默认值为normal，italic 倾斜字体样式

font :"font-size font-weight font-size/line-height font-family" font:italic 700 20px "Microsoft Yahei" 其中不需要的设置的属性可以省略(取默认值)，但必须保留font-size和font family属性

5.外观属性

color:文本颜色预定义颜色(red,blue,green) 十六进制(#FF0000,#FF6600,#29D794) RGB代码(rgb(255,0,0),rgb(100%,0%,0%))

text-align:文本水平对齐 left 左，right 右，center 居中

line-height:行间距,一般行距比字号大7.8像素左右

text-indent:首行缩进 ,单位用em字符宽度的倍数，1em就是1一个汉字的宽度

text-decoration:文本装饰 nore默认值取消下划线，underline定义文本下划线，overline定义文本上的一条线(不常用)，line-through穿过文本的一条线(不常用)

Lonely King

关注

0
点赞
踩
0

收藏

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

第一章1.CSS初始CSS(Cascading Style Sheets) 通常称为CSS样式或层叠样式表，主要用于版面的布局和外观显示样式，网页的美容师2.引入CSS样式表2.1.行内样式(内联样式)通过标签的style属性设置元素的样式<h1 style="color:pink;font-size:12px;">行内样式表</h1>只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余没有实现结构与样式分离2.2.内部样式表(内嵌样式表)
复制链接

扫一扫