CSS3
2023-03-23 09:17:03 0 举报AI智能生成
学习笔记
作者其他创作
大纲/内容
基础
概述
CSS是层叠样式表（Cascading Style Sheets)，给html添加样式的
注释
/* 注释内容 */
在HTML中使用CSS（3种）
行内样式，写在标签的style属性中（谨慎使用）
<p style="width:100px; height:200px"></p>
内部样式，写在html的head标签中
<style>
css样式;
</style>
css样式;
</style>
外部样式，写在一个单独的css目录中
<link rel="stylesheet" href="./css/index.css">
注意：当为某一个元素设置多种样式时的应用顺序为
行内样式
内部样式，外部样式（样式从上到下应用，只会应用最后面的）
内部样式写在外部样式后面，应用的是内部样式
外部样式写在内部样式后面，应用的是外部样式
浏览器默认样式
语法
选择器 {
属性名: 属性值;
...
}
属性名: 属性值;
...
}
选择器
常用选择器
标签选择器
div {
css样式;
}
css样式;
}
类选择器
/* 一个类选择器可以被多个标签使用；一个标签可以使用多个类选择器，中间用空格隔开（用的最多）*/
.jingdong {
css样式;
}
.jingdong {
css样式;
}
id选择器
/* 唯一的，配合js使用 */
#taobao {
css样式;
}
#taobao {
css样式;
}
通配符选择器
组合选择器
交集选择器
并集选择器
关系选择器
后代元素选择器
子代选择器
兄弟选择器
逗号选择器
属性选择器
伪类选择器
伪元素选择器
颜色定义（4种）
关键字
red、green、blue、pink、yellow、white、...
十六进制
#ffffff
rgb
rgb(red, green, blue)
red,green,blue是三原色，取值范围都是0到255
rgba(red, green, blue, alpha)
alpha表示透明度，值取0到1之间，0表示完全透明，1表示完全不透明
hsl
hsl(hue, saturation, lightness)
hue表示色相，取值范围是0到360
saturation表示饱和度，取值范围是0%到100%
lightness表示亮度，取值范围是0%到100%
hsla(hue, saturation, lightness, alpha)
alpha表示透明度，值取0到1之间，0表示完全透明，1表示完全不透明
文本样式
字体样式：font-style
normal 文字正常显示
italic 文本以斜体显示
italic 文本以斜体显示
字体粗细：font-weight
字体大小（单位px）：font-size
字体系列：font-family
文本颜色：color
body {
color: blue;
}
color: blue;
}
文本对齐：text-align
center
left
right
justify（将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中））
left
right
justify（将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中））
h1 {
text-align: center;
}
text-align: center;
}
文字装饰：text-decoration
none
文本缩进：text-indent
字母间距：letter-spacing
行高：line-height
文本阴影：text-shadow
背景样式
背景颜色：background-color
background-color: green; // 背景颜色
background-color: green; // 背景颜色
opcity: 0.3; // 背景颜色透明度
或者
background：rgba(0, 255, 0, 0.3)
background-color: green; // 背景颜色
opcity: 0.3; // 背景颜色透明度
或者
background：rgba(0, 255, 0, 0.3)
背景图片：background-image
background-image: url("bgdesert.jpg");
背景重复：background-repeat
background-repeat: repeat-x; // 图像仅在水平方向重复
background-repeat: repeat-y; // 图像仅在垂直方向重复
background-repeat: no-repeat; // 只显示一次背景图像
background-repeat: repeat-y; // 图像仅在垂直方向重复
background-repeat: no-repeat; // 只显示一次背景图像
背景附着：background-attachment
background-attachment: fixed; // 固定背景图像
background-attachment: scroll; // 背景图像应随页面的其余部分一起滚动
background-attachment: scroll; // 背景图像应随页面的其余部分一起滚动
背景位置：background-position
属性值是2个关键字，有9种
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
background-position: right top; // 属性值有两个
注意：如果只写一个关键字，另一个关键字默认是center
属性值是2个百分比数
0% 0%
background-position: 0% 50%; // 属性值有两个
注意：第一个值是水平位置，第二个值是垂直位置，取值范围都是从0%到100%；如果只写一个百分比数，另一个百分比数默认是50%
背景简写：background
background: #ffffff url("tree.png") no-repeat right top;
注意：在使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position
属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。
background-color
background-image
background-repeat
background-attachment
background-position
属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。
自由主题
0 条评论
下一页
