CSS基础

最新推荐文章于 2024-10-01 23:54:35 发布

满山的猴子我毛最多

最新推荐文章于 2024-10-01 23:54:35 发布

阅读量98

点赞数

本文链接：https://blog.youkuaiyun.com/qq_43467548/article/details/101034623

版权

####CSS
什么是CSS？
Cascading层叠 Style样式 Sheet表，CSS用于美化页面，使用CSS可以把样式
代码和HTML 分离
如何在HTML页面中引入CSS？

1.内联样式：在标签内部添加上style属性，值为样式代码弊端是不能复用

我是你的爸爸

2.内部样式：在head标签内部添加style标签标签体内写样式代码。好处是能在当前页面复用，弊端是不能多页面复用 img { border: 5px solid blue; width: 100px;

}
3.外部样式：在单独的css文件中写样式代码，在head标签内部通过link标签引入
好处是可以多个页面复用
@charset “UTF-8”;
ol {
color:green;
}
优先级：内联样式优先级最高
内部和外部相同，后执行的覆盖前面执行的
###选择器
标签名选择器（基础选择器）
-格式：标签名{}会把页面中所有的此类型的标签全部选中
####id选择器
-格式：#id{}把页面中此id的元素选中
类选择器：
格式：.class{}把页面中此class的元素选中
属性选择器
-格式：基础选择器[属性名=‘属性值’]
#####################################################
后代选择器：
-格式：#d1 div p span{
color: red;
}
/id为d1元素下的div里面的所有后代span/
#d1 div span{
background-color: blue;
}
#d1 span{
border: 1px solid pink;
}
########子元素选择器
格式:#d1>div>span{
border: 5px solid red;
}
例如:

Insert title here

审判

收盘

span3

span4

例2： Insert title here

}

我是你的爸爸

打开冰箱
放入冰箱
关闭冰箱

############################3
分组选择器：
-分组选择器把多个选择器通过，分割合并成一个选择器，用来统一设定样式
-格式：
div,#id,.class{}
#########任意元素选择器
格式：*{}

Insert title here 网站1 网站2 网站3 网站4 css中的常用属性 ##颜色的赋值方式 1.通过颜色单词赋值：pink;purple,red 2.通过6位的16进制赋值三原色（red green blue）三原色取值范围0~255 举例：红色ff0000 蓝色 0000ff 绿色00ff00 黄色ffff00 五种方式： div { /*6位16进制赋值*/ /* background-color: #ff0000; */ /*3位16进制*/ /* background-color: #f00; */ /* background-color: rgb(255,0,0); */ background-color: rgba(0,0,255,0.2); } Insert title here

测试颜色的div

#########布局相关的属性（盒子模型） -盒子模型包括：元素的宽高，外边距，内边距，边框 ##宽高width,height 块级元素可以设置宽高，如果只设置宽度高度会自动识别为内容高度，行内元素的宽高由内容决定不能修改 ####外边距 -指元素边框距离上级元素或相邻兄弟元素的距离 Insert title here

div1

span1 --行内元素左右外边距生效，上下外边距不生效行内相邻的两个元素同时存在右外边距和左外边距时两指增加 -块级相邻的两个元素同时存在下外边距和上外边距时两值增加 Insert title here

<span id="s1">span1</span><span is="s2">span2</span>
<div id="d1">div1</div>
<div id="d2">div2</div>