前端之CSS
/这个是CSS的注释/
行内样式
行内样式是在标记的style属性中设定CSS样式,不推荐大规模使用。
<p style="color:red">hello,world</p>
内部样式
嵌入式是将CSS样式集中写在网页的标签对的标签对中
格式如下:
<head>
<meta charset="utf8">
<title>标题</title>
<style>
p{ background-color:red }
</style>
</head>
外部样式
外部样式就是将CSS写在一个单独的文件中然后在页面进行引入即可,推荐使用此方式:
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
CSS 选择器
元素选择器
p{cllor:"red"}
ID 选择器
#m2{background-color: red}
类选择器
.k {font-size:14px}
p.k {
color:red;
}
注意:
样式类名不要用数字开头因为有的浏览器不认识,
标签中的class属性如果有多个,要用空格分隔。
通用选择器
* {color:white;}
组合选择器
后代选择器
li内部的a标签设置字体颜色
li a {color:green;}
儿子选择器
选择所有父级是div元素的p元素
div>p {font-family: "Arial Black", arial-black, cursive; }
毗邻选择器
选择所有紧接着div元素之后的p元素
div+p {margin:5px;}
弟弟选择器
m后面所有的兄弟p标签
#m~p {border:2px solid royalblue;}
属性选择器
用于选择带有指定属性的元素
p[title] {color:red;} 用于选择带有属性和值的元素
p[title=“213”] {color:red;}
分组和嵌套
分组
当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如:
div,p {color:red;}
上面的代码为div标签和p标签统一设置字体为红色。
嵌套
多种选择器可以混合起来使用,比如: .C1类内部所有p标签设置字体颜色为红色。
.C1 p {cplor:red;}
伪类选择器
未访问的链接
a:link{color:red}
鼠标移动到链接上
a:hover{color:red}
选定的链接:
a:active{color:red}
已访问的链接
a:visited{color:red}
input输入框获取焦点时的样式
input:focus{outline:none;background-color:green;}
伪元素选择器
first-letter
常用的给首字母设置特殊样式:
p:first-letter {font-size:48px; color:red;}
before
在每个p元素之前插入内容
p:before {content:“¥¥” color:red;}
after
在每个p元素之前插入内容
p:after {content:“¥¥” color:red;}
before和after多用于清除浮动
选择器的优先级
CSS继承-------继承是CSS的一个主要特征。
选择器的优先级
内联样式权重1000
id选择器权重100
类选择器权重10
元素选择器权重1
权重计算永不进位
除此之外还可以通过添加 !important方式来强制让样式生效,但是并不推荐使用,因为如果过多的使用
! important 会使得样式文件混乱不易维护。
CSS属性相关
宽高
width属性可以为元素设置宽度
height属性可以为元素设置高度
块级别标签才能设置宽度,内联标签的宽度由内容来决定
字体属性
font-family 可以把多个字体名称作为一个回退系统来保存,如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可以识别的第一个值。
简单实例:
body {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}
字体大小
p {font-size:30px;}
文字属性
text-align 属性规定元素中的文本的水平对齐方式
左边对齐 left
右边对齐 right
居中对齐 center
两端对齐 justify