论CSS样式的使用以及常用属性

Posted 2021-12-11 awei313558147

css的使用方式（）
1.行内样式（内联样式）
<标签 ></标签>

2.页面嵌入（内部样式表）
在head标签里面增加一个子标签
<style>
选择器{
属性名1:属性值1;
属性名2:属性值2;
......
}
</style>

3.外部文件（外部样式表）
在head标签里面增加一个子标签
<link rel="stylesheet" href="css文件的路径" />

4.外部导入样式
主要用在样式初始化。因为有一些标签有自己的样式，我们需要清空，方便自己计算

*{
margin: 0;
padding: 0;
}

css------选择器
ID选择器
使用id选择器：在元素上面增加一个id属性,id属性的属性值不用用数字开头
一个页面中只能有一个id属性值
css中id选择的表示方法用 # 表示
class选择器
使用class选择器：在元素上增加一个class属性，class属性的属性值不能用数字开头
一个页面中可以有多个class属性值
css中class选择器的表示方法用 . 表示
标签选择器
直接写标签名
组合选择器
选择器直接用,分隔开即可
子代选择器
> 只针对子代
后代选择器
用空格表示，包含着子代选择器
通用选择器
* 针对于所有的标签

选择器是有权重的
内联样式 1000
id 100
class 10
元素 1
通用 0
boss !important 只要出现，就以这个为主

text-align: right;     /*文本对齐方式*/

text-decoration: underline;    /*文本下划线*/

line-height: 166.67px;      /*文本的行高*//*一行文字所占的高度,让他上下居中*/

font-family: "字体";设置字体的样式

font-style:     ;     /*规定字体是否倾斜*/

font-weight: bold;加粗

font-size:  16px ;     /*设置字体的大小*/

在浏览器中,默认的字体大小16px
谷歌浏览器中，字体大小最小可以为12px
火狐没有限制

:hover 叫伪类选择器
当你的鼠标放上去的时候，会变化成的样子权值 10

无序列表：

<ul type="">
<li>英语</li>
<li>语文</li>
<li>数学</li>
<li>政治</li>
<li>地理</li>
</ul>

background-color: rgba(255,0,0,0.1); /*最后一个参数a表示透明度，取值的范围是0-1之间，可以为0和1*/
/*只表示背景颜色*/

background-color: #f00;
opacity: 0.1; /*取值的范围是0-1之间，可以为0和1*/
/*表示整个元素*/