CSS入门基础----6.19

最新推荐文章于 2024-07-24 22:39:14 发布

i33.

最新推荐文章于 2024-07-24 22:39:14 发布

阅读量74

点赞数 1

分类专栏： 98的h5c3学习之路文章标签： css css3 html 前端

本文链接：https://blog.csdn.net/weixin_50768118/article/details/125360413

版权

98的h5c3学习之路专栏收录该内容

33 篇文章 1 订阅

订阅专栏

HTML的局限性：说起HTML，他其实是个非常单纯的家伙，他只关注内容的语义。

CSS简介：

CSS是层叠样式表的简称，有时也称为CSS样式表或级联样式表。是一种标记语言。
CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
HTML主要做结构，显示元素内容。CSS可以美化HTML，让页面布局更简单。
CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）和样式（CSS）相分离。

CSS语法规范：

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。

属性与属性值以 "键值对" 的形式出现

</head>  
   <style>
       /* 选择器{样式} */
       /* 给谁改样式{改什么样式} */
     p{ color: red; 
        font-size: 100px;}
   </style>
</head>

CSS代码风格

以下代码书写风格不是强制规范，而是符合实际开发书写方式。

推荐展开格式，更加直观。

    紧凑格式：h3 { color：deeppink；font-size：20px；}

    展开格式：h3 { color：deeppink；
                  font-size：20px；
                 }

CSS基础选择器：

CSS选择器的作用：

选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。

简单来说，就是选择标签用的。

CSS选择器的分类：

选择器分为基础选择器和复合选择器两个大类。

基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。

1. 标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

标签名{
     属性1：属性值1；
     属性2：属性值2；
     属性3：属性值3；
     ...
     }

2. 类选择器：如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

结构需要用class属性来调用 class---类的意思类名是自己起的

<style>
.类名 {
    属性1：属性值1；
    ...
      }
  </style>
  <body>
<li class='类名'>变红色</li>
    </body>

类命名规则：

头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar

栏目：column 页面外国控制整体布局宽度：wrapper 左右中：left right center
登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot
新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu

类选择器--多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。

简单理解就是一个标签有多个名字。

可以把一些标签元素相同的样式（共同的部分）放到一个类里面。标签都可以调用这个公共的类，然后再调用自己独有的类。从而节省CSS代码，统一修改也非常方便。

    <style>
        .red {
            color: deeppink;
             }
        .font35 {
            font-size: 35px;
                }
    </style>
       <body>
          <div class="red font35">陈亚婷</div>
       </body>

3.id选择器可以为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以 " # " 来定义。

id属性只能在每个HTML文档中出现一次。（样式#定义，结构id调用，只能调用一次。）

  <style>
   #pink {
     color: pink;
         }
    </style>

<body>
    <div id="pink">陈亚婷</div>
</body>

id选择器和类选择器的区别

1.类选择器(class)好比人的名字，一个人可以有多个名字，同时一个名字可以被多个人使用

2.id选择器好比人的身份证号码，全中国是唯一的，不得重复。

3.类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

4.通配符选择器：在CSS中，通配符选择器使用 " * " 定义，他表示选取页面中所有元素（标签）。不需要调用，自动就给所有的元素使用样式

  <style>
     * {
        color: red;
       }
   </style>

四种基础选择器的总结

i33.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门基础----6.19

CSS简介和四种基础选择器
复制链接

扫一扫

专栏目录