web前端css简单

css样式相对来说是比较简单

一：css样式有三种方式：
行内css，在标签对里对标签设置样式 style=“”
内部css，最好在head里面加样式
外部css: 导入外部css文件
导入外部文件的固定格式；唯一不同的就是文件名

-第一种行内css–

谢谢你们来看我的博客

–第二种行内css–

再次感谢你们来看我的博客

第三种外部css：

二：选择器

1：定义的类选择器

web前端

在css样式格式：
.first{ 样式表 ；}
2定义id选择器

web前端

在css样式格式：
<#two{ 样式表 ；}（不要尖括号)
3；定义标签选择器

web前端

在css样式格式：
div{ 样式表 ；}
4：包含选择器

web前端 很牛逼

div span{ 样式表 ；}
5:子选择器
选择器A >选择器B{ 样式表 ；}
注意：子选择器只能包含他下一代，不能隔代，
6,选择器分组；
选择器A，选择器B{ 样式表 ；}
7:属性选择器
a.选择器[属性]{ 样式表 ；}
b.选择器[属性=属性值]{ 样式表 ；}

三css伪类（四种）
1 ：link 未访问的链接（只对a标签有用）
2 ：visiter 已访问的链接（只对a标签有用）
3 ：hover 鼠标移上去 （对所有标签都有用）
4 ：active 选定的链接 不放开（只对a标签有用）
只写一个例子：
a:link{
font-size:70px;
text-decoration:none;(去掉下划线）
}
：after 选择器在被选元素之后内容后面加入内容
：before 选择器在被选元素之后内容前面加入内容
注意必须配合content使用
p:before{
content:”大家好”;
}
四：css继承（个人觉得没有什么好说的，就记住顺序就行了）
！important>行内样式>ID选择器>类选择器> 标签选择器
包含选择器>选择器分组
注意：同级的选择器，以最后设置的为准（也就是就近原则）
css规则
1;@import 可以导入外部css文件

@import “文件名.css”;

2：@charset
3：@font-face 定义一个字体
@font-face {font-family:”myfont” src:url=”字体路径” format(“truetype”);}
4:@media
@ media screen and (max-width:1000px;background:red;}
当屏幕的宽度小于1000px时背景颜色为红色

##未完待续…….