css相关样式总结

css相关样式总结

Cascading Style Sheet层叠样式表: 美化页面 (装修)

css的优势：

• 内容和表现分离
• 网页结构表现统一，可以实现复用
• 样式十分丰富

如何在html页面中添加CSS样式代码

• 三种引入方式:

• • 内联样式: 在标签的style属性中添加样式代码, 弊端:不能复用
  • 内部样式: 在head标签里面添加style标签, 标签体内写样式代码, 可以复用但是只能在当前页面复用不能多页面复用
  • 外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以实现多页面复用
  • 三种引入方式采取就近原则，谁离得近就用谁

• 工作中外部引入方式用的多,因为可以多页面复用而且可以将html代码和CSS样式代码分离开, 学习过程中内部用的多

选择器

作用：选择页面上的某一个或某一种元素

1.标签名选择器: 选取页面中所有同名标签

• 格式: 标签名{样式代码} 例：

• h1{
       color: blue;}
  

2.id选择器: 当需要选择页面中某一个元素时使用

• 格式: #id{样式代码} 例：

• #h1-1{
       color: red;}
  <h1 id="h1-1">电视</h1>
  

3.类选择器: 当需要选择页面中多个不相关的元素时,给多个元素添加相同的class,然后通过类选择器进行选择

• 格式: .class{样式代码} 例：

• .c1{
       color: blue;}<