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="**">
包含选择器
再别的选择器中空格隔开 可以添加其他标签 就叫包含选择器 会增加权重
** *{}