前端学习Day3

最新推荐文章于 2024-07-13 20:38:58 发布

WienBZ

最新推荐文章于 2024-07-13 20:38:58 发布

阅读量26

点赞数

文章标签：学习 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_61900957/article/details/129714229

版权

CSS语法规范

主要构成：选择器以及一条或多条声明

h1{ color:red; font-size:25px; }

选择器是用于指定CSS样式的HTML标签

<head>之间写<style></style>里写

代码风格

展开式

小写字母

属性值前，冒号后，保留一个空格

选择器（标签）和大括号中间保留空格

CSS基础选择器

选择标签用的。

CSS选择器参考手册

基础选择器

由单个选择器组成的。

标签选择器

标签名 {
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
...
}

<style>
        /* 选择器{样式} */
        p {
            color: red;
            font-size: 12px;
        }
    </style>
...
<body>
    <p>有点意思</p>
</body>

选择全部的某一类的标签。

类选择器

要实现差异化选择不同的标签，单独选一个或者某几个标签。

开发最常用。

.类名（自定义）{
属性1：属性值1；
...
}

结构需要用class属性来调用class类的意思：

<li class="red">冰雨</li>

命名尽量有意义，类命名规范。

小案例：红绿红三个盒子

.red {
            width: 100px;
            height: 100px;
            background: red;
        }

        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
...
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>

多类名

一个标签有多个名字。

<div class="red font20">亚瑟</div>

标签class属性可以写多个类名，多个类名之间必须用空格分开，这个标签分别有这几个样式。

id选择器

#id名{
属性1：属性值1；
...
}

样式#定义，结构id调用，只能调用一次，别人切勿使用。

通配符选择器

选择器使用*定义，选取页面中所有元素（标签）。

*{
属性1：属性值1；
...
}

CSS字体属性

字体系列

css使用font-family属性定义文本的字体系列。

p {font-famliy:"微软雅黑";}
div {font-family:Arial,"Microsoft Yahei","微软雅黑";}

多个字体依次显示。

最常见的直接给body{font-famliy:'Microsoft Yahei',tahoma,arial,'Hiragino Sans GB';}

字体粗细

css使用font-weight属性定义文本的字体粗细。

实际开发提倡用数字加粗。

font-weight: 700;

如果只需要标题变大而不需要变粗，可以这样写：

h2{
font-weight: 400;
font-weight: normal;
/*二选一即可*/
}

文字样式（如斜体）

css使用font-style属性定义文本的字体样式。

normal :默认值；

italic：斜体字体；

复合属性

div {
/* font-style: italic; */
/* font-weight: 700; */
/* font-size: 16px; */
/* font-family: 'Microsoft Yahei'; */
/* 复合属性：简写的方式 */
/* font: font-style font-weight fint-size/line-height font-family; */
font: italic 700 16px 'Microsoft Yahei';
}

顺序不能颠倒，空格隔开，必须保留font-size和font-family属性，其余可省。

文本属性

文本颜色color

对齐文本

text-align （只能水平对齐）

left 左对齐（默认）

right 右对齐

center 居中对齐

装饰文本

text-decoration（下划线、删除线、上划线）

none 默认，没有装饰线

underline

overline

line-through

文本缩进

text-indent: 20px;

如果此时写了2em 则缩进是当前元素2个文字大小的距离。

行间距

line-height: 26px;

上间距+文字高度+下间距，默认为16px。

FSCapture

WienBZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习Day3

顺序不能颠倒，空格隔开，必须保留font-size和font-family属性，其余可省。标签class属性可以写多个类名，多个类名之间必须用空格分开，这个标签分别有这几个样式。css使用font-family属性定义文本的字体系列。css使用font-weight属性定义文本的字体粗细。要实现差异化选择不同的标签，单独选一个或者某几个标签。css使用font-style属性定义文本的字体样式。之间写里写。css使用font-size属性定义文本的字体大小。
复制链接

扫一扫