css基础1

最新推荐文章于 2024-09-14 17:04:32 发布

南夏繁笙

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量1k

点赞数 3

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

本文链接：https://blog.csdn.net/weixin_45770470/article/details/108446582

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS基础1

感觉有一丢丢难记，加油冲冲冲
vcode TAB补全

	CSS（Cascading Style Sheets）层叠样式表，美化html，布局网页。	构成：

选择器 以及一条或多条申明

CSS代码风格

1.提倡展开式风格，分行，属性后加“；”

h1 {color: yellow;
	font-size: 12px;
}

2.小写
3.空格规范 ：后一个空格，h1后一个空格

选择器

$选择器\left\{ \begin{aligned} 复合选择器 & & \ \\ 基础选择器（单个选择器）& & \ \left\{ \begin{aligned} 标签选择器 \\ 类选择器 \\ id选择器 \\ 通配符选择器\end{aligned} \right. \end{aligned} \right.$

TYPE		使用
标签选择器	`<style> p { color: red;} </style>`	html标签名作为选择器，迅速为页面中同一类型的标签设置统一样式
类选择器（常用）	`<style> .red { color: red}</style> 调用时<p class="red">`	单独选一个或几个标签时 ,样式点定义（名字随便起英文，或者拼音，有前端开发规范手册，不要使用纯数字、中文等命名），结构类（class）调用。多类名`<div class="red font20">` 必须用空格隔开
id选择器	`<style>#id名{属性1：属性值；属性2：属性值} </style> <p id="id名">`	样式`#`定义，结构id调用，只能调用一次（一般用于页面唯一性的元素上面）
通配符选择器	`<style> * { margin：0；padding：0；} </style>`	所有标签统一修改样式，用`*` 定义，不需要调用

注意：标点一定是英文状态，要不然怎么运行都找不到原因

css字体

注意：标点一定是英文状态！！！总是错。。。

字体

//多个字体，用英文逗号隔开,字体是组合的要加引号，（多字体兼容性好）
body {font-family:  "Microsoft Yahei",'Times New Roman',Arial;}

字体粗细

font-weight正常(normal)是400，加粗(bold)是700，不用单位

p {
	font-weight: 700;
	}

字体样式

文体风格：正体（normal）；斜体（italic）

p {
	font-style: normal;
	}

多用于把斜的摆正,斜体标签(em,i)改为正的。

字体复合属性

它是有顺序的！
先看正斜，再看粗细，再大小，最后样式(复合写时大小和样式必须有)
{font: font-style font-weight font-size/line-height font-family}

div {font-style: italic; 
        font-weight: 700;
        font-size: 16px; 
        font-family: 'Microsoft Yahei';
    }
=div{font：italic 700 16px 'Microsoft Yahei';}