CSS样式基础_0

时间:2019-02-17
本文章向大家介绍CSS样式基础_0,主要包括CSS样式基础_0使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1.CSS 样式使用方法

  • 内联式、嵌入式和外部式
  • 内联式,写在标签中
  • 嵌入式css样式,写在当前的文件中<style>...</style>
  • 外部式,写在一个单独的文件中

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

<!---rel="stylesheet" type="text/css" 是固定写法不可修改--->

  • 三种方法的优先级别内联式 > 嵌入式 > 外部式,越容易修改的优先级越高。嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面

2.CSS中的选择器

  • 每一条css样式声明(定义)由两部分组成,形式如下:

    选择器{
        样式;
    }
    

    在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

  • 标签选择器其实就是html代码中的标签如,html,body,h1,p等

  • 类选择器.类选器名称{css样式代码;}类选器名称可以任意起名

  • ID选择器

    ID选择器都类似于类选择符,但也有一些重要的区别:

    • 1、为标签设置id=“ID名称”,而不是class=“类名称”。
    • 2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。
  • 类选择器和ID选择器的区别

    • 不同点
      • 1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次
      • 2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
      .stress{
      color:red;
      }
      .bigsize{
          font-size:25px;
      }
      <p>到了<span class="stress bigsize">三年级</span>下学期时,我们班
      ...大</p>
      
  • 子选择器

    子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素的样式。

    .food>li{border:1px solid red;}
    

    这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。
    总结:>作用于元素的第一代后代,空格作用于元素的所有后代

  • 通用选择器

    通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:

    * {color:red;}
    
  • 伪类选择符
    为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

    a:hover{color:red;}
    
  • 分组选择符号
    当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,)

    h1,span{color:red;}
    

3.继承层叠和特殊性

  • 继承

    CSS的某些样式是具有继承性的,继承即父元素的样式不仅应用于其本身还应用于其子元素,如 color,但border等样式不具备继承性。

  • 特殊性

    标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100

    权值越高样式的优先级越高,哪个描述更具体就用哪个样式。

    p{color:red;} /*权值为1*/
    p span{color:green;} /*权值为1+1=2*/
    .warning{color:white;} /*权值为10*/
    p span.warning{color:purple;} /*权值为1+1+10=12*/
    #footer .note p{color:yellow;} /*权值为100+10+1=111*/
    
  • 层叠

    层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用.

  • 重要性

    使用!important来设置某些样式具有最高属性

    p{color:red!important;}
    p{color:green;}
    <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
    

    用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。

4.CSS格式化排版

  • 字体、字号、颜色、粗体、斜体、下划线

    现在网页一般喜欢设置“微软雅黑”

    body{font-family:"Microsoft Yahei";font-size:12px;color:#666}
    a{font-weight:bold;font-style:italic}
    span{text-decoration:underline;}
    
  • 设置段落缩进、行间距、中文字间距、字母间距

    p{text-indent:2em;line-height:1.5em; letter-spacing:50px;word-spacing:50px;}
    
  • 对齐

    div{text-align:center}
    

ref:


[1] https://www.imooc.com/learn/9