css基本认识与应用

css基础应用

css的属性样式

文字三属性： color， font-size， font-family

盒子三属性：width，height，background-color

css的属性样式发生了改变 由html的k=“v”变成了k：v；

color文字颜色

属性名：color

<p sryle="color :***;">***</p>

• 

background-color-rgba(255,255,255,5) 不透明度

字号

属性：font-size

属性值：常用的是以px为单位的数字值

字体

属性：font-family

属性值：必须以双引号包裹，属性值可以有多个，使用逗号分隔开

如果页面中有中文化混合的，需要同时设置对应的字体如果第一种字体识别不了，会按顺序加载识别字体，中英文会分别进行加载

< p style="font-family:"'宋体'，'黑体','Arial'“></p>

font 字体

family 家庭 家族

font-family字体系列

font-size字体大小 16px=1em em属性是相对的如果继承了父元素的字体属性 则em等于父元素的px值

font-style字体样式

normal 字体不倾斜

例 font-style:narnal;

oblique 倾斜

italic 斜体

font-weight字体粗细

normal正常不加粗

bold 粗体

bolder加粗体

lighter 比正常粗体细

font-weight：100~900 100~300细体400-500正常600~粗体

line-height :**px 行高 如果不写单位会以字符的倍数计算

font:*** *** *** *** *** 可以缩写 但是要按照顺序排列 加粗 斜体 大小 字体

在head中加入style可以将行元素和块元素互相专属安

行内样式

在html中，使用<style>行内样式

<div style="color:red">***</div>

内嵌式

把style放在head中 是为了打开网页可以优先加载

<style>

***{ ** } ***给元素名称的命名 后续使用可以直接引用命名 **元素

</style>

例：

<style type="text/css" > html载入的文本/css层叠样式表

div{ bockground-color:gray;

width: 31.25rem;

height: 37.5rem; }

</style>

链接样式（外链式）

将css写入单独的一个文件中

link 关系 现指链接

stylesheet 样式表

在另一个html中引入css样式

例：

<link rel="stylesheet" href="#"> # css样式的打开方式

行内元素优先级是最高的

内嵌式外链式谁离boby标签近谁的优先级高

一般顺序：行内，内嵌，外链

导入式

@import "css文件路径"；

标签选择器

把style放在head中 是为了打开网页可以优先加载

<style>

***{ ** } ***给元素名称的命名 后续使用可以直接引用命名 **元素

</style>

例：

<style >

div{ bockground-color:gray;

width: 31.25rem;

height: 37.5rem; }

</style>

ID选择器

没个html都有不同的ID

#id值{} 就是ID选择器

<style>#**{}</style>

<div id="**">

类(class)选择器

.类名{}

<style>.**{}</style>

<div class="**">

• 

• 

包含选择器

再别的选择器中空格隔开 可以添加其他标签 就叫包含选择器 会增加权重

** *{}