CSS基础介绍:
CSS(Cascading Style Sheet，层叠样式表)定义如何显示样式表
当浏览器读到一个样式表,就会按照这个样式表对文档进行渲染
CSS基础标签:
注释 :
/**/
行内样式:
行内式是在标记的style属性中设定的CSS样式,不推荐大规模使用:
<p style = "color : red"></p>
内部样式:
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head> <meta charset="UTF-8"> <title>Title</title> <style> p { color: aqua; } </style> </head>
外部样式:
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
<link rel="stylesheet" href="my.css">
CSS选择器:
元素选择器:
p { color:"red"; }
ID选择器:
#d1 { color:"red"; }
类选择器:
.c1 { color:"red"; }
通用选择器:
* { color:"red"; }
组合选择器:
后代选择器:
/*div标签内部的所有span标签设置颜色*/ div span { color:"green"; }
儿子选择器:
/*div标签内部父级是div的span标签设置颜色*/ div>span { color:"green"; }
毗邻选择器:
/*选择所有在div标签下面的span标签设置颜色*/ div+span { color:"green"; }
弟弟选择器:
/*所有在div标签下面的span标签设置颜色*/ div~span { color:"green"; }
属性选择器:
/*选择有xxx属性的标签设置颜色*/ [xxx] { color:"red"; } /*选择有xxx属性的div标签设置颜色*/ div[xxx] { color:"red"; } /*选择有xxx属性并且值为2的标签设置颜色*/ [xxx="2"] { color:"red"; } /*选择有xxx属性并且值为2的div标签设置颜色*/ div[xxx="2"] { color:"blue"; }
分组与嵌套:
/*div标签与p标签的颜色设置*/ div,p { color: blue; } /* 在一个类是c1的标签内 的p标签的颜色设置*/ .c1 p { color: red; }
伪类/伪元素选择器:
/*在a链接没有被点击过时设置的颜色*/ a:link { color: aqua; } /*鼠标悬浮在a链接上设置的颜色*/ a:visited { color: red; } /*在a链接被点击中设置的颜色*/ a:hover { color: deeppink; } /*在a链接被点击过后设置的颜色*/ a:active { color: blue; } /*点击进入输入框时背景颜色*/ input:focus { outline: none; background-color: chartreuse; } /*p标签文本第一个字设置颜色大小*/ p:first-letter { font-size: 50px; color: blue; } /*在p标签中的文本最前面加一个字设置颜色大小*/ p:before { content: "d"; font-size: 60px; color: chartreuse; } /*在p标签中的文本最后加上内容设置颜色大小*/ p:after { content: "???"; font-size: 70px; color: aqua; }
选择器优先级:
内联选择器>id选择器>类选择器>元素选择器
CSS属性相关:
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
font-size可以设置文本字体的大小:
/*将p标签中的文本字体设置为48像素*/ p { font-size: 48px; }
如果设置成inherit表示继承父元素的字体大小值。
设置字体粗细:
/*设置p标签中文本字体加粗*/ p { font-weight: "bold" ; }
未完待续-------