css常用选择器和常见属性

最新推荐文章于 2023-08-04 11:11:48 发布

Cynthia_wpp

最新推荐文章于 2023-08-04 11:11:48 发布

阅读量615

点赞数 1

分类专栏： CSS 文章标签： CSS基础

本文链接：https://blog.csdn.net/weixin_41050155/article/details/79989338

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1)、CSS (cascading style sheets）层叠样式表
-css作用：用来为网页里的HTML元素定义显示风格和样式的。

2)、css代码的引入
–引入css代码有以下三种方式
①、元素内嵌：
语法: <标签 style=”css代码”>
例如：

②、将css代码统一定义在style标签里
    语法：<head>
              <style type="text/css">
                  选择器{css代码}
              </style>
          </head>
③、将css代码统一定位在一个以.css后缀的文件里，在网页中通过<link>引入指定的css文件
    语法：
        <head>
            <link type="text/css" rel="stylesheet" href="css文件的路径"/>
        </head>

3)、CSS语法
–选择器{属性名：属性值；属性名：属性值。。。。}

其中选择器的写法：
①、元素选择器:用标签名做选择器
    例如：h1{color:red}

②、类选择器： .类别名{CSS代码}
    例如：.a1{color:yellow;background-color:red}
    使用：在需要使用这种风格的标签上添加class属性指定
    特殊：h3.a3{color:pink;background-color:orange}
    为h3单独定义一类特殊的显示风格
        <h3 class="a3">

③、id选择器：#id{css代码}
    例如： #d1{color:AAAAAA;background-color:555555}
    使用： 在需要使用这种风格的标签里添加id属性指定
           <h1 id="d1">i am happy</h1>
    注意：id属性主要用来唯一标识网页里的一个标签属性，其次才用来给标签设置风格

④、组合选择器：标签1，标签2，……标签n{css代码}
         例如：h1,h2,h3{color:red;background-color:yellow}

⑤、后代选择器：标签1 标签2{css代码}
                .abc 标签1{css代码}
         例如：p h1{color:red;background-coor:pink}
         说明：标签1中的所有标签2都具有此种风格。

⑥、伪类选择器：主要针对超链接标签
         使用：a:hover{color:...;text-decoration:underline/none}

4、CSS的常见样式属性–参考api

5、与Css相关的html标签
※ span :本身没有什么风格，用来对一小段文字进行微调
※ div 表示网页里的一块区域。

div相关属性：
①、position --定位div使用，可选值static absolute relative fixed
  static(默认)：div自占一行，默认出现在当前文本的下一行，可以为其指定高度和宽度如果没有指定，宽度占正行，高度由内容决定。
absolute:绝对定位，需要同时给定left top bottom right 或者left top width height
fixed:固定窗口，常用来定义锚点。
relative：相对定位，相对于其它的容器。
②、float：在一个图层内部，对div进行浮动布局，此时所有div都是行级元素。
        可选值：left right
③、clear:left right both none 不允许当前div哪一边有内容，后来的管不了。
④、display:inline block none(不显示，不占空间)
   visibility:visible hidden(隐藏，不显示，保留所占空间)
⑤、补白   (内补白、外补白)

    margin(外补白)---格式：
        a.  margin:top right bottom left
        b.  margin:top和bottom left和right
        c.  margin-left margin-right margin-top margin-bottom

    padding(内补白)

5、css框架集

①、frameset框架集把页面分割成多个部分，每个部分就是一个单独的html页面。
   注意：frameset和body不能同时出现。
②、框架集 <frameset cols='' rows=''>
   代表一个框架集，内部通过会再嵌套多个子框架。
   cols:定义frameset的列结构，分为几个部分，每个部分分别占用的百分比空间%用逗号隔开。
   rows：定义frameset的行结构。
③、框架   <frame src='' name=''>
          src:显示在该框架中的html页面的路径。
          name：该框架窗口的名称，作为页面跳转时用到
                <a href='' target='目标框架名称'>目标网页会刷新在target指定的网页里。

Cynthia_wpp

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css常用选择器和常见属性

1)、CSS (cascading style sheets）层叠样式表 -css作用：用来为网页里的HTML元素定义显示风格和样式的。2)、css代码的引入 –引入css代码有以下三种方式 ①、元素内嵌：语法: &lt;标签 style=”css代码”&gt; 例如： ②、将css代码统一定义在styl...
复制链接

扫一扫