CSS学习:
CSS语法:
<style>
选择器
{
css属性 : css属性参数;
}
</style>
CSS样式导入三种使用方式:
1.行内样式,在标签的属性栏写入参数:style = "css属性 = css属性参数;"
2.文件内样式,在html网页文件内写入:
<style>
选择器
{
css属性 : css属性参数;
}
</style>
3.CSS文件方式,在html文件外的css文件写入:
选择器
{
css属性 : css属性参数;
}
然后在html文件内导入css文件,有俩两种方式:
1.html文件中写入<link rel = "stylesheet" href = "要导入的css文件路径">
2.或者在html文件中写入:
<style>
@import url("css文件路径")
</style>
导入多个css样式时选择就近原则,或者使用覆盖原则,而不是优先级原则
CSS三种基本选择器:
1.标签选择器,标签选择器是对标签进行匹配
标签
{
css属性 : css属性参数;
}
2.class选择器
.class
{
css属性 : css属性参数;
}
3.id选择器
#id
{
css属性 : css属性参数;
}
当一个标签匹配多种基本选择器时使用优先级原则:
id选择器 > class选择器 > 标签选择器
CSS三个高级选择器:
1.层次选择器,层次选择器有4种:
1).后代选择器,选择根类的后代所有与标签匹配的:
根 匹配
{
css属性 : css属性参数
}
2).子代选择器,只匹配父类的子类与标签所匹配的:
父 > 匹配
{
css属性 : css属性参数
}
3).相邻兄弟选择器,相邻兄弟选择器只匹配兄弟同级向下第一个标签的
兄弟 + 匹配
{
css属性 : css属性参数
}
4).通用选择器.通用选择器匹配兄弟所以同级向下的标签的
兄弟 ~ 匹配
{
css属性 : css属性参数
}
2.结构伪类选择器,结构伪类选择器有很多中,我只学了其中4种:
1).根的后代的第一个子元素是否匹配
根 匹配:first-child
{
css属性 : css属性参数
}
2).根的后代的最后一个子元素是否匹配
根 匹配:last-child
{
css属性 : css属性参数
}
3).根的后代的第几i个元素是否匹配
根 匹配:nth-child(i)
{
css属性 : css属性参数
}
4).根的后代的类型相同的第i个匹配的元素
根 匹配:nth-of-type(i)
{
css属性 : css属性参数
}
根只是限制,如果不加根那么就是以html为根进行选择
3.属性选择器,属性选择器具有很强大的匹配功能
属性选择器有两种写法:
第一种写法:选择匹配中的元素与属性相匹配
匹配[属性]
{
css属性 : css属性参数
}
第二种写法:选择匹配中的元素与属性相匹配且将属性值再匹配
匹配[属性 = 属性值]
{
css属性 : css属性参数
}
可以使用不同的匹配模式:其中 = 是完全匹配, ^= 是开头匹配 *= 是包含匹配 $= 是结尾匹配。
在高级选择器中,无论是匹配,根,还是父,兄弟都可以是基本选择器(标签选择器,id选择器,class选择器)
CSS注释: /**/
CSS有两种颜色系统:1.RGB 2.HSL
RGB:通过三原色(R红G绿B蓝)的组合来表示不同的颜色
RGB有两种表示方式:
1).RGB(0,0,0,0),这是全写形式,前三个参数表示红绿蓝的值,范围是(0-255),第四个参数表示亮度。
2). 表现形式:#00000000 简写形式,通过两个十六进制数来表示0-255,可以用这种方式代替复杂的写法,最后的亮度也是两个十六进制数
HSL:通过一个360度的调色盘来取颜色
表示方式: hsl(0,0,0) 第一个参数表示取颜色的度数,第二个参数表示饱和度,第三个参数表示亮度
字体样式:
font-fmaily:字体样式,有楷体,微软雅黑等等,设置文字样式时可以设置多个,最好将英语样式放到中文样式前,这样当找一个英语字母时,可能中文样式也有,找到了字母就不会向后找了,这样英文样式就显得多余了,最好在找一个全能的字体样式库兜底。
font-size:文字大小。
font-weight:文字粗细,参数可以是数值(100最小900最大),也可以是字符串,lighter代表细体,bolder代表粗体 font:可以直接使用 参数是 字体风格(斜体之类) 字体粗细 字体大小 字体样式
文字样式:
color:文字颜色,颜色有三种表示方法,第一种字符串(red等于红色,black等于黑色),第二种#000000(#号后更6位16进制表示rgb,前两位代表r,中间两位代表g,后面两位代表b),第三种rgb(r,g,b)(r,g,b范围0-255),或rgba(r,g,b,a)(比rgb加了一个alpha代表亮度)
text-indent:文字首行缩进,单位可以是 em(1个em大小大约等于一个字符),2em刚好等与首行缩进两格
text-align:文字对其方式 center是居中对齐,left是左对齐,right是右对齐
text-decoration:文字线位置,underline是下划线,line-through是中划线,overline是上划线none是没有文字线,可以用这种方式去链接的下划线
line-height:行高
vertical-align:参照物垂直对其方式
