前端学习笔记（二）——css样式 - 好文

CSS选择器

   作用：选择对应的元素
   语法：选择器名后跟{},{}里面写对应的样式名与样式值.{样式名:样式值;样式名:样式值;...}

1、元素选择器——会选择html文档里素有与选择器名相同的元素
div{ background-color: orange; } p{ color: red; } body{ background-color:
blue; }
2、群组选择器——会获取到每个逗号之间与之名字相同的所有的元素
h1,h2,p,div { color :yellow; }
3、id选择器——会获取到设置了对应id值得元素
前提：需要事先给对应的元素设置id值
注意：同一页面中id值不能重复!!!!
id名的命名规则，只能由字母，数字，下划线组成，并且数字不能开头

小驼峰命名法：多个单词除了第一个单词其余所有单词首字母大写（常用）

大驼峰命名法：所有单词首字母大写（不常用）

另有“匈牙利命名法”和“帕斯卡命名法”，但很少用到，可自行百度了解
#p3 { background-color: red; }
4、class(类)选择器——获取到设置了对应class值得所有元素
前提：需要给对应的元素设置class值
注意：class值可以重复!!!!!
.textCenter{ text-align: center; }
5、后代选择器

语法:
E F {
background-color:red;
}
找到E对应的元素里所有的与F对应的元素（E、F可以是元素选择器名，id选择器名，class选择器名）
#div3 p span { font-size: 30px; }
6、子选择器

语法:
E>F{
color:red;
}
找到E对应的元素里所有的且与E元素呈父子关系的元素（E、F可以是元素选择器名，id选择器名，class选择器名）
#div3>p { background-color: orange; }
优先级：*<标签选择器 <class选择器 <id选择器 <行间样式<!important

CSS样式

CSS：Cascading Style Sheets 层叠样式表

作用:决定如何显示html元素

css是html4之后出现的,版本一共有三个1.0 2.0 3.0

W3C编码理念:结构(html),样式(css),行为(js)三者相分离

如何书写css?
1.行间书写css: 在想要设置css样式的元素的内部用style属性书写css样式
2.内联式书写css: 在当前文档的head标签里用style标签书写css样式
3.外联式书写css: 单独创建一个css文件书写css样式

三种样式引入方式

1.行间样式的引入
   写法：在标签中,写一个style的属性比如：style="...."

   在引号当中,写对应的css样式
   缺点：不利于维护，不利于代码重用，违背了W3C的编程理念
   优点：优先级最高,针对性极强
<p style="background-color:red;">这是一个红色背景色段落</p>

2.内部样式的引入
写法：在head标签里,写一个style标签,在标签中,通过选择器来控制样式

优点：加载速度块，不需要去请求服务器
缺点：不利于代码重复利用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>内联式css样式</title> <style type="text/css"> div{ background-color: cyan;
height:300px; width:400px; font-size: 20px; color:red; line-height: 300px;
text-align:center; } </style> </head> <body> <div>这是一个div元素</div> <div><img
src="5.jpg" alt=""></div> </body> </html>

3.外部样式表的引入
写法：在head标签里,写一个link标签,用来关联一个css文件,在css文件中,通过选择器来控制样式

link标签:<link rel="stylesheet" herf="css文件的路径">

优点：利于代码重复利用
缺点：需要加载服务器

引入外部css样式文件
方法1：link标签引入（推荐）
方法2：@import引入

link和@import引入的区别：
   1.link是html语法，import是css语法
   2.link是在html文档加载的开始加载css文件的，而import是在html文档加载结束之后才开始加载css文件的
   3.link可以引入任意类型的文件，import只能引入css文件
   4.使用link方式引入的css代码在后期我们使用js进行修改，但是import方式引入的css代码以后无法修改

  @import引入——需要将引入的代码写在style标签里
<style type="text/css"> @import url(style.css); </style>
  link标签引入——把标签写在head标签里
<link rel="stylesheet" href="style.css">
CSS3中新增了很多新的样式，后期我们会在做介绍

热门工具换一换