JavaEE学习笔记--CSS(1)

JavaWeb前端篇

CSS

• CSS

  什么是css？
  Css是指层叠样式表 cascading style sheets
  通过cssw可以让我们定义html元素如何显示。
  通过css可以大大提高工作效率，可以让我们将html代码与样式代码分离,通过css可以让我们原本html不能描述的效果，通过css描述出来。

  Css作用:
  通过css描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率。

  CSS书写规则:
  选择器 {属性:值;属性:值}
  选择器它的主要作用就是用于确定我们当前的css修饰的是哪一个元素
  在大括号中可以有多个声明，声明是由属性与值组成，它们之间使用(:)分开，而多个声明之间，使用的是(;)来分开

• CSS与HTML结合方式

第一种方式–内联方式:

<div style="color:red;font-size:200px">hello world</div> 

就是在我们的html标签上通过style属性来引用css代码.
这种方式优点: 简单方便 缺点:只能对一个标签进行修饰

第二种方式–内部样式表

是在我们的< html>标签内通过< style>标签来声明我们的css
优点:可以通过多个标签进行统一的样式设置
缺点:它只能在本页面上进行修饰

<style>    div{        color:red;        font-size:100px;        border:1px solid black    }</style>

第三种方式–外部样式表

我们需要单独定义一个css文件,注意css文件的后缀名就是css
我们创建了一个demo3.css文件,它与demo3.html在同一路径下

<link rel="stylesheet" type="text/css" href="demo3.css">

扩展:外部导入还有一种方式使用@import

<style type="text/css">    @import "demo3.css"</style>

关于外部导入css使用< link >与@import的区别?

1. @import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面。
   如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面
2. @import方式导入css样式，它是不支持javascript的动态修改的。而link支持。

Css导入的方式是有优先级的：
内联样式>内部样式>外部样式

• CSS中选择器

  1. id选择器

     它只能选择一个元素.它使用#引入，引用的是元素的id属性值。

  2. 类选择器

     类选择器在使用时使用”.”来描述，它描述的是元素上的class属性值

  3. 元素(标签)选择器

     它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称.

  4. 选择器分组

     就是让多个选择器可以同时使用同样的一段css，注意选择器之间使用逗号分开

  5. css中的派生选择器

     对< li>标签下的< strong>标签内容进行css样式设置
     派生选择器是用于描述元素与元素之间的关系，使用空格来描述。

  6. Css伪类
     Css伪类可对css的选择器添加一些特殊效果

     锚伪类
     它是用于对超连接添加特殊效果.
     a:link 设置未访问的连接
     a:visited 设置已访问的链接
     a:hover 设置鼠标放置在超连接上
     a:active 选择超连接时

• 关于css中书写的值的注意事项:

  1. css它不区分大小写，但是对于id与class的值，它是区分的。
  2. 对于数组，可以使用具体数值，也可以使用百分比，它默认的单位是px,css也可以使用其它的单位 mm cm 等
  3. 如果属性值是由多个单词组成，那么需要加上引号.