web前端篇:CSS使用,样式表特征,选择器

Posted xujunkai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web前端篇:CSS使用,样式表特征,选择器相关的知识,希望对你有一定的参考价值。

web前端篇:CSS使用,样式表特征,选择器

1.CSS介绍

  • CSS :Cascading Style Sheet 层叠样式表
  • 作用 :修饰和美化页面元素,实现网页排版布局

2.CSS使用

1行内样式/内联样式

  • 特点 :在具体的标签中使用style属性,引入CSS样式代码

  • 语法:

    • <标签 style="CSS 样式声明">
    • CSS 样式声明 / 语句:
      • 对当前元素添加样式
      • 语法:CSS 属性 :值;
    • 注意:CSS 样式声明可以是多条,<标签 style="属性:值;属性:值;"
  • 常见的CSS属性

    • 设置字体大小:

      1.属性:font-size

      2.取值 以像素为单位的数值,浏览器默认的字体大小是 16px

    • 设置字体颜色:

      1.属性:color

      2.取值:颜色的英文单词或RGM(数值,数值,数值)或#b0b0b0(十六进制)

    • 设置背景颜色

      • background-color
      • 取值:颜色的英文单词或RGM(数值,数值,数值)或#b0b0b0(十六进制)
    <!--行内样式-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p style="background: red;color:RGB(123,145,164);font-size: 19px;">asd</p>
    </body>
    </html>

2.文档内嵌/内部样式表

  • 特点:将CSS代码与具体的标签相分离,在HTML文档中使用标签引入CSS代码。

  • 语法:

          <style>
              选择器1
              选择器2
              选择器3
              ...
          </style>
  • 选择器:

    1.使用文档内嵌方式引入CSS样式表时,实现了结构与样式相分离,但是需要自己定义选择器来匹配文档中元素,为其应用样式。

    2.作用 : 匹配文档元素为其应用样式。

    3.语法:选择器实际上由两部分组成

    选择器(符)
    属性 :值;
    属性 :值;

    et :
      标签选择器/元素选择器:
      使用标签名作为选择符,匹配文档中所有的该标签,并应用样式
      p 
          color :green;
          font-size :20px;
      
    • 注意:可以书写在文档中的任意位置,但是基于样式优先的原则,一般写在中。

3.外链方式/外部样式表

  • 定义外部的.css文件,在HTML中引入即可,真正实现文档与样式表分离。
  • 语法:
    • 在外部的样式表中使用选择器定义样式;在HTML文档中使用引入CSS文件

3.样式表特征

1继承性

  • 继承性
    • 大部分的CSS属性都是可以被继承的
    • 子元素或者后代元素可以继承父元素中的样式
    • 所有的文本属性都可以被继承,块元素的宽度与父元素保持一致

2.层叠性

  • 允许为元素定义多个样式,共同起作用。

    p
      color:red;
      background-color:blue;
    

3.样式表的优先级

  • 从低到高
  • 从低到高 :
    • 浏览器缺省设置 :浏览器默认样式
    • 文档内嵌/外链方式 :在不发生样式冲突时,样式共同起作用;
      如果发生样式冲突,后来者居上,最后定义的样式最终显示
    • 行内样式的优先级最高

4.CSS选择器

  • 作用:规范页面中哪些元素能够应用声明好的样式
  • 目的 :匹配页面元素

1.标签选择器/元素选择器

  • 特点:将标签名作为选择符,来匹配文档中所有的该标签,包含后代元素

  • 语法:

    标签名
      属性:值
    
    标签名如a,div

    text-decoration : none;取消下划线

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div
                background-color: #aaffff;
                font-size:20px;
            
            a
                text-decoration:none;
            
        </style>
    </head>
    <body>
        <div>这是标签</div>
        <a href="">点一下</a>
    </body>
    </html>

2.类选择器

  • 特点:通过元素的class属性值进行匹配

  • 语法:

    .cl
      样式
    
    <p class="cl">p文本</p>
    以英文.开头,跟上class属性值,中间没有空格
创建文件 class-selector
创建几个元素 div p span h1
使用类选择器为上述元素添加样式
1. 文本大小为24px
2. 背景颜色为橘色
3. 文本斜体显示 font-style : italic;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cl
            font-size:24px;
            background-color: orange;
            font-style:italic;
        
    </style>
</head>
<body>
    <div>这是标签</div>
    <p class="cl">p文本</p>
</body>
</html>

3.ID选择器

  • id 作用:HTML中所有的元素都有一个id属性,主要用来表示该元素在文档中的标志,具有唯一性。

  • id 选择器:通过元素的id属性值进行匹配

  • 语法:

    属性值
      样式
    

    注意:通常网页中外围的结构化标签,都使用id进行标识,具有唯一性。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #seq
                width:100%;
                height:50px;
                background-color: pink;
            
        </style>
    </head>
    <body>
        <span id="seq">这是一个span文本</span>
    </body>
    </html>

4.群组选择器

  • 作用:为多个选择器设置共同的样式。

  • 语法:

    选择器1,选择器2,选择器3
      样式
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div,h1,p
                background-color: gray;
                margin:0;<!--外边距为0-->
            
        </style>
    </head>
    <body>
        <h1>标题1</h1>
        <div>div</div>
        <p>p</p>
    </body>
    </html>

5.后代选择器

  • 作用:依托于元素的后代关系来匹配元素(既包含直接子元素,也包含后代元素)。

  • 语法:

    选择器1 选择器2
      样式
    }
  • 在选择器1对应的元素中匹配后代元素,后代元素需满足选择器2。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #nav span
            border-radius:2px;
            background-color:RGB(204,204,204);
            padding-left:10px;
        
    </style>
</head>
<body>
    <p id="nav">
        <span>你好</span>
        <span>
            <span>在那里</span>
        </span>
        <span>再见</span>
    </p>
</body>
</html>

6.子代选择器

  • 作用:依托元素的子代关系进行匹配,只匹配直接子元素。

  • 语法:

    选择器1>选择器2 
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #nav>ul>li
                color:red;
            
        </style>
    </head>
    <body>
        <div id ="nav">
            <ul>
                <li>你好</li>
                <li>你好<span>good<span>good</span></span></li>
            </ul>
        </div>
    </body>
    </html>

7.伪装选择器

  • 分类:

    • 超链接伪类选择器
    • 动态伪类选择器
  • 作用 :

    • 主要是针对元素的不同状态去设置样式

    • 超链接的不同状态

      • 访问前 :link
      • 访问后 :visited
      • 激活(鼠标点按不松):active
      • 鼠标滑过 :hover
    • 其他元素具备

      • 鼠标滑过 :hover
      • 鼠标点按 :active
    • 表单控件

      • 获取到焦点时的状态 :focus
      • 对文本框和密码框而言,当用户点击输入时,都视为获取焦点状态
    • 伪类选择器需要与其他选择器结合使用,设置元素在不同状态下的样式。

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <style>
              a:link
                  color: #8e3fff;
                  text-decoration:none;
              
              a:hover
                  color: #ff45aa;
                  text-decoration:none;
              
              a:visited
                  color: greenyellow;
                  text-decoration:none;
              
              a:active
                  color:blue;
                  text-decoration:none;
              
      
          </style>
      </head>
      <body>
          <a href="#">哈哈</a>
      </body>
      </html>

注意:如果要给超链接添加四种状态下的样式,必须按照以下顺序书写伪类选择器

    :link
    :visited
    :hover
    :active
    简称 “爱恨原则 LoVe / HAte ”

8.属性选择器

  • 通过元素的tpye实现CSS。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            input[type="text"]
                background-color: red;
            
        </style>
    </head>
    <body>
        <input type="text">
    </body>
    </html>

9.伪元素选择器

  • 在文本前后增加内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*在p标签前添加元素*/
        p::before
            content:"抽烟";
        
        /*在p标签后添加元素*/
        p::after
            content:"烫头";
        
    </style>
</head>
<body>
    <p>喝酒</p>
</body>
</html>
#设置文本第一个字符
#通过伪元素添加内部为行内元素

5.选择器的优先级

  • 当多个选择器的样式同时应用到一个元素上时,要按照不同选择器的优先级来应用样式。

    div
      color:red;
    
    #box
      color:green;
    
    .c1
      color:blue;
    
    <div id="box" class="c1">文本</div>
  • 判断选择器的优先级,主要看选择器的权重(权值)数值越大,优先级越高。

    选择器          权值
    标签选择器       1
    类选择器/伪类    10
    id选择器         100
    行内样式         1000
  • 如果是复杂的选择器 (后代,子代),选择器最终的权值是各选择器权值之和

权重比较: ? ? ?  
1.数选择器数量: id 类 标签  谁大它的优先级越高,如果一样大,后面的会覆盖掉前面的属性 ? ? ?  
2.选中的标签的属性优先级用于大于继承来的属性,它们是没有可比性 ? ? 
3.同是继承来的属性 ? ? ? ? ?  
    3.1 谁描述的近,谁的优先级越高 ? ? ? ? ?  
    3.2 描述的一样近,这个时候才回归到数选择器的数

6.练习题:

1.div和span标签在网页中的作用?

div将网站分割成独立的逻辑区域division分割
span:小区域标签,在不影响文本正常显示的情况下,单独设置对应的样式。
<style>
    span.active
    font-weight:bold;
    
</style>
<p>
    <span>内容</span>
</p>

2.CSS基础选择器和高级选择器有哪些?

- 基础选择器
  - 类选择器
  - 标签选择器
  - id选择器
- 高级选择器
  - 后代选择器
  - 子代选择器
  - 组合选择器
  - 交集选择器
  - 伪装选择器      (link visited hover active)
  - 伪元素选择器

3.盒子模型的属性有哪些?并说明属性的含义,画出盒子模型图?

- width:内容宽度
- height:内容的高度
- border:边框
- padding:内边距
- margin:外边距

4.如何让文本垂直和水平居中?

<style>
    div
        width:200px;
        height:60px;
        text-align:center;
        line-height:60px;
    
</style>
<div>
    wusir
</div>

让行高等于盒模型的高度实现垂直居中
使用text-align:center;实现文本水平居中

5.如何清除a标签的下划线?

text-decoration:none;
none:无线,underline:下划线,overline:上划线,line-through:删除线.

6.如何重置网页样式?

html,body,p,ul,ol
    margin: 0;
    padding: 0;

/*通配符选择器 */
*
    margin: 0;
    padding: 0;

a
    text-decoration: none;

input,textarea
    border: none;
    outline: none;

7.如何清除input和textarea标签的默认边框和外线?

border:0;
outline:0;

8.在css中哪些属性是可以继承下来的?

1.字体系列属性:
font-family:字体系列
font-weight:字体的粗细
font-size:字体的大小
fnot-style:字体的风格

2.文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:单词之间的间距
letter-spacing:中文或者字母之间的间距
text-transform:控制文本大小
color:文本颜色

3.元素可见性
visibility:控制元素显示隐藏

4.列表布局属性
list-style列表风格,包括list-style-type,list-style-image

5.光标属性:
cursor:光标显示为何种形态



color,text-xxx,font-xxx,line-height,letter-spacing,word-spacing

9.如何正确比较css中的权重?

如果选中了标签
    数选择器的数量  id  class 标签 谁大优先级越高 如果一样大,后面优先级越大
    如果没有选中标签,当前属性是被继承下来,他们的权重为0,与选中的标签没有可比性
    都是继承来的,谁描述的近,就显示谁的属性(就近(选中的标签越近)原则),如果描述的一样近,继续数选择器的数量。
    !important 它设置当前属性的权重为无限大,大不过行内样式的优先级

10.块级标签和行内标签?

块级标签:
1.可以设置高度,如果不设置宽度,默认是父标签的100%的宽度
2.独占一行
p
div
ul
ol
li
h1~h6
table
tr
form

行内标签:
1.不可以设置宽高
2.在一行内显示
a 
span
b
strong
em
i

行内块标签
1.可以设置宽高
2.在一行内显示
input
img

以上是关于web前端篇:CSS使用,样式表特征,选择器的主要内容,如果未能解决你的问题,请参考以下文章

Web前端HTML5&CSS304-CSS语法与选择器

前端开发 - CSS - 总结

前端知识点总结(HTML篇2)

CSS入门(css简介与样式汇总CSS的使用方式CSS样式表的特征CSS基础选择器和复杂选择器边框阴影)

基础篇CSS你知道多少?

前端随堂笔录3