CSS语法介绍与CSS选择器

CSS

  • 语法内容
    • 1.引入到html的方法
      • 1.内部样式表
      • 2.行内样式表
      • 3.外部样式
  • 二.选择器
    • 1.基础选择器
      • 1. 标签选择器:
      • 2.类选择器
      • 3.id选择器
      • 4.通配符选择器

语法内容

1.语法:选择器+(1或n条声明)
2.每个声明决定要修改的是那个标签
3.声明中的属性是键值对,键值对之间用: 结束用;
4.css可以单独使用也可以搭配在html中使用(能有让样式和界面结构分离),一般在head标签内放入选择器,
5.使用/* */注释

作用:
1.对网页中元素位置的排版进行像素级控制,美化页面。
2.实现页面的结构和样式分离。

<html>
<head>
    <title>css选择器title>
    <style>
        p{
            /* 选择颜色 */
            color:blue;
            /* 设置字体 */
            font-size: 50px;
        }
    style>
head>
    <p>hellop>
html>

1.引入到html的方法

将CSS内容写在

1.内部样式表

1.内部样式表

<html>
<head>
    <title>css选择器title>
    <style>
        p{
            /* 选择颜色 */
            color:blue;
            /* 设置字体 */
            font-size: 50px;
        }
    style>
head>
    <p>hellop>
html>

2.行内样式表

2.行内样式表

<style>
        p{
            /* 选择颜色 */
            color:blue;
            /* 设置字体 */
            font-size: 50px;
        }
    style>
    <p style="color:red">hellop>

在这里插入图片描述
将style作为属性加入行内标签。
不过这种写法的优先级高,虽然选择器已经是blue,但是最后还是red的颜色。

3.外部样式

因为外部样式的使用,可以让样式和结构完全分离,所以实际中一般都用外部样式。

使用方法:
1.在vscode中建立一个css文件,后缀为css。
在这里插入图片描述
2.在这文件中直接写好声明与属性。
CSS语法介绍与CSS选择器_第1张图片
3.在html文件中与css建立连接,一般写在head标签中
CSS语法介绍与CSS选择器_第2张图片

<head>
    <title>css选择器title>
    
    <link rel="stylesheet" href="style.css">
head>
    <div>hellodiv>

二.选择器

1.基础选择器

1. 标签选择器:

<style>
    p{
        color:aqua;
    }

    div{
        color:red;
    }

style>
    <p>张三p>
    <p>张三p>
    <p>张三p>
    <div>李四div>
    <div>李四div>
    <div>李四div>

在这里插入图片描述

  • 能将同类的标签都选择出来(同类标签颜色会变的一样)
  • 但是不能在同类标签中选择其中的标签(同类标签颜色不能不一样)

2.类选择器

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

    <div class="blue">李四div>
    <div>李四div>

在这里插入图片描述

  • 可以给相同的标签中加入class属性(用来调用) 这样就可以让相同标签的内容呈现不一样的颜色。
  • 可以让多个标签使用同一个标签(class中的内容)
  • 差异化表示不同标签
  • 类名用.开头

3.id选择器

  • id选择器使用 # 加html中的某个元素的id值来表示
  • id是唯一的,class不是唯一的(原因,id身份证唯一,class地址,姓名不唯一)
<style>
    #name {
        color: blue;
    }
style>
    <div id="name">李四div>

4.通配符选择器

  • 使用*来选择全部标签 全部内容都会被改变颜色
<style>
    * {
        color: blue;
    }
style>
    <div id="name">李四div>
    <div id="name">李四div>
    <div>李四div>
    <div>李四div>
    <div>李四div>
    <div id="name">李四div>

在这里插入图片描述

你可能感兴趣的:(CSS,CSS,CSS选择器,CSS入门,前端,网页)