【前端web入门第三天】01 css定义和引入方式 四种标签选择器

文章目录:

  • 1.css 定义
  • 2.css引入方式
  • 3.选择器
    • 3.1 标签选择器
    • 3.2 类选择器
    • 3.3 id选择器
    • 3.4 通配符选择器
  • 4. 画盒子

1.css 定义

层叠样式表(Cascading Style Sheets,缩写为CSS),是一种样式表语言,用来描述HTML文档的呈现(美化内容)书写位置:title标签下方添加style 双标签,style标签里面书写CSS代码。

写在哪里?
head里,title下面

怎么写
先写style标签,里面写css代码,然后就是写选择器和css属性
选择器{属性名:属性值;}

代码模板样例:

<style>
        /* 选择器 */
        p{
            /* css属性,键值对的形式 */
            /* color:颜色; */
            color: darkorange;
            /* font-size: 像素大小; */
            font-size: 100px;
        }
 style>
<body>
 <p>CSS首次学习p>
body>

效果如下:
【前端web入门第三天】01 css定义和引入方式 四种标签选择器_第1张图片


2.css引入方式

  • 内部样式表:学习使用
    • CSS代码写在style标签里面
  • 外部样式表:开发使用
    • CSS代码写在单独的CSS文件中(.css)

    • 在HTML使用link标签引入

      <link rel="stylesheet" href="./my.css">
      

.css文件里面怎么写
直接写style里面的代码即可

rel写什么?
行内样式表

  • 行内样式:配合JavaScript使用

    <div style="color: red; font-size:20px;">这是div标签div>
    

3.选择器

作用:查找标签,设置样式。

基础选择器

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

s

3.1 标签选择器

标签选择器:使用标签名作为选择器→选中同名标签同名标签设置相同的样式

例如:p, h1 , div , a, img…

<style>
	p {
	  color: red;
	}
style>

解释说明:

就是说我们设置了p为红色,下面所有需要红色的文字部分,我们都用p来设置

3.2 类选择器

如果我们需要有的是红色,有的是别的颜色,但是我们文字部分用的都是p标签怎么办?
使用类选择器.

作用:查找标签,差异化设置标签的显示效果。

步骤:

  • 定义类选择器→.类名
  • 使用类选择器→标签添加class=“类名”

模板代码:

<style>
	
	.red {
	color: red;}
style>


<div class="red">这是div标签

完整代码举例说明:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        /* 选择器 */
       .red{
            color: rgb(255, 17, 0);
        }
    style>
head>
<body>
 <p>CSS首次学习p>
 <p class="red" >CSS首次学习p>
body>
html>

效果如下:
在这里插入图片描述
多个类选择器怎么同时使用?

  <style>
        /* 定义*/
       .red{
            color: rgb(255, 17, 0);
        }
        .size{
            font-size: 50px;
        }
    style>

<body>
 <p class="red size" >CSS首次学习p>
body>

注意:

  • 类名自定义,不要用纯数字或中文,尽量用英文命名.
  • 一个类选择器可以供多个标签使用
  • 一个标签可以使用多个类名,类名之间用空格隔开

开发习惯:类名见名知意,多个单词可以用–连接,例如:news-hd


3.3 id选择器

作用:查找标签,差异化设置标签的显示效果。
场景:id选择器一般配合JavaScript使用,很少用来设置CSS样式

步骤:

  • 定义id选择器→#id名
  • 使用id选择器→标签添加id= “id名”
  <style>
        /* 定义 */
      #red {
        color: red;
      }
    style>

 <p id="red">红色p>

规则:
同一个id选择器在一个页面只能使用一次


3.4 通配符选择器

作用:查找页面所有标签,设置相同样式。
通配符选择器:*,不需要调用,浏览器自动查找页面所有标签,设置相同的样式

 *{
     color: red;
}

它会让所有的标签都变成红色.

在实际开发过程中的用处?
许多标签或者列表之类的各种各样的格式标签,中间的间距都是不同的,我们可以使用通配符选择器,刷新他们之间的间距为0,然后再统一更改

4. 画盒子

目标:使用合适的选择器画盒子
新属性

属性值 作用
width 宽度
height 高度
background-color 背景色

代码样例:

 <style>
       .red{
        width: 100px;
        height: 100px;
        background-color: brown;
       }

       .orange{
        width: 200px;
        height: 200px;
        background-color: orange;
       }
 style>

<body>
 <div class="red">div1div>
 <div class="orange">div1div>
body>

【前端web入门第三天】01 css定义和引入方式 四种标签选择器_第2张图片

你可能感兴趣的:(前端web开发,前端,css)