CSS——网页的变美指南
CSS是什么呢?Cascading Style Sheets,层叠样式表,又叫级联样式表,简称样式表。
CSS基本语法:选择器,以及一条或多条的声明。
每条声明又是由一个属性和一个值构成。
具体表示为:
<style>
h3{
color:red;
font-size:20px;
}
</style>
*注:该语句需要写在head中。
当然,还可以使用内联样式的方式进行声明<p style="color:red;">我是p标签</p>
。但该方式不利于维护,通常不使用这种方式添加样式。内部样式、内联样式都有一定的缺点,当遇到无法使用的时候我们该怎么办?
这里就要讲一下我们的外部样式了。即单独创建一个CSS文件存放CSS,其他文件调用时使用link语句来调用样式。
一、CSS选择器
- 全局选择器:*
- 元素选择器:标签名称
- 类选择器:class属性名(.)
- ID选择器:ID属性名(#)
- 合并选择器:选择器1,选择器2…
选择器的优先级:行内样式>ID选择器>类选择器>元素选择器
二、字体属性
包含颜色(color)、大小(font-size)、粗细(font-weight)、样式(font-style)、
颜色:rgb(255,255,255)
大小:最小12px
粗细:lighter细;bold粗;bolder更粗(100-900:400正常;700等同于bold)
样式:italic斜体字、normal正常
font-family:指定元素的字体
三、背景属性
属性 | 描述 |
---|---|
background-color | 背景颜色 |
background-image | 背景图片 |
background-position | 背景图片显示位置 |
background-repeat | 背景图片填充方式 |
background-size | 背景图片大小length、percentage、cover、certain |
四、文本属性
text-align:水平对齐方式,left居左(默认值),right居右,center居中。
text-decoration:文本修饰,underline下划线,overline上划线,line-through删除线。
text-transform:文本大小写,capitalize每个单词开头大写,uppercase全部大写,lowercase全部小写。
text-indent:首行文本缩进。
五、表格属性
表格边框:border(宽度,solid加粗,颜色)
折叠边框:border-collapse(collapse折叠)
表格文字对齐:td中text-align水平对齐,vertical-align垂直对齐。
表格填充:padding(文本和表格的距离)
六、关系选择器
- 后代选择器
- 子代选择器
- 相邻兄弟选择器
- 通用兄弟选择器
语法分别为:
E F{}:所有被E包含的F元素
E>F{}:E元素的直接子代F元素,对更深层次的元素无用
E+F{}:紧跟在E元素后面的F元素
E~F{}:E元素后面所有的F元素
这是今天的所有内容,下次见~