css学习第二天

最新推荐文章于 2024-05-29 22:27:45 发布

知识分子李云龙

最新推荐文章于 2024-05-29 22:27:45 发布

阅读量226

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/A_Liyulong/article/details/123801016

版权

1，复合选择器由哪几种，

1.1后代选择器(父选择器空格后代选择器 {})

标签结构必须是父子级关系！！！子级可以有多级内容。

后代包括：儿子，孙子，重孙…

显示结果：样式只在后代标签中显示

<style>
  div p {
    color:red
  }
</style>
......
<body>
  <p>
    这是一个p标签
  </p>
  <div>
    <p>
      这是一个div的子标签p
    </p>
  </div>
</body>

1.2子代选择器（父选择器>子代选择器 {} )

子代包括：儿子

显示结果：样式只在子代标签中显示

<style>
  div>p {
    color:red
  }
</style>
......
<body>
  <div>
    <p>
      这是一个div的子标签p
    </p>
    <p>
      <a herf="">这是p标签的子标签a</a>
    </p>
  </div>
</body>

1.3并集选择器（选择器1，选择器2）

同时选择多组标签设置相同的样式

显示结果：css属性在所有的选择器中都显示

<style>
  选择器1，
  选择器2，
  选择器3，
  ...{
    css属性
  }
</style>

1.4交集选择器（选择器1选择器2…)「工作中使用少！！！」

页面中同时满足多个标签的选择器

显示结果：a标签的内容变red

<style>
  p.box {
    color:red
}
</style>
......
<p>
  p标签内的内容
  <a href="" class="box">a标签的内容</a>
</p>

1.5伪类标签（选择器:hover{})

鼠标悬停在上面的状态显示(背景，颜色等)

任何一个标签都能添加伪类！！！！

<style>
  a:hover {
    background-color:red
  }
</style>
......
<p>
  <a href="">鼠标悬停换红色背景</a>
</p>

2，emmet语法

Html简写

3.背景相关属性

3.1背景颜色

<style>
  p {
    background-color:red
  }
</style>
......
<p>
  这是背景为红色的内容
</p>

3.2背景图片（background-img:url(图片地址))

<style>
  p {
    background-image:URL();
  }
</style>
......
<p>
  这是有背景图片的内容
</p>

3.3背景图的平铺（background-repeat）

repeat 默认水平垂直平铺

no-repeat 不平铺就是只有一个图片

repeat-x 水平方向平铺

repeat-y垂直方向平铺

3.4背景图位置装饰（backgroud-position：水平方位位置空格垂直方位位置）

两种书写方式：方向；数字+px

一：方向

水平方位位置：left center right

垂直方位位置：top center bottom

二：数字+px

原点（0px 0px）

正数px（向右或向下）负数（向左和向上），背景图片只能显示在盒子里面

<style>
  p {
    background-img:url(图片路径)
    background-position:50px 100px
}
</style>

3.5复合属性（background）

复合属性中背景图位置的关键字可以颠倒顺序，坐标数值不可颠倒顺序（坐标是唯一的）

<style>
  p {
    background:red url(图片路径) no-repeat center bottom；
    background:red url(图片路径) no-repeat 50px 100px；
      
}
</style>

4，显示模式-块

特点：独占一行；宽度同父级元素，宽度由内容撑开；宽高可以调整

块标签：div，p、H1～H6、ul、li、等等

4.1显示模式-行内

特点：一行可以有多个；宽度由内容撑开，宽高不可以调整

行内标签：a、span、字体标签（b、u、i、s）等等

4.2显示模式-行内块

特点：一行能显示多个；可以设置宽高。

行内块标签：input、textarea、button、

特殊情况：img标签有行内块元素特点。

4.3显示模式-转换

目的：改变元素默认的显示模式

转换的盒子之间会有一个默认的间距。

display的的属性有

display：block 转换成块级标签，

display：inline-block转换成行内块标签

display：inline转换成行内标签。

<style>
        div {
            width: 400px;
            height: 400px;
            background-color:skyblue;
            display: inline-block;
        }
        span {
            width: 400px;
            height: 400px;
            background-color:skyblue;
            display:block;
        }
</style>
......
    <div>这是一个块标签1</div>
    <div>这是一个块标签2</div>
    <span>这是一个行内标签1</span>
    <span>这是一个行内标签2</span>

5.拓展-标签的嵌套

标签的嵌套的原则大套小。标题段落不可嵌套，a和a之间不许嵌套；p不允许嵌套div。

6.1 css特性-继承性

可以常见的继承属性：文字控制属性都可以继承（color，font，text-align,text…；不是控制文字的都不能继承。

继承失效的特殊情况：a超链接有自己的默认颜色，h1～h6标题有自己的字号也不能继承。但是可以单独的标签选择器进行修改

6.2 css特性-层叠性

给同一个标签设置不同的样式，样式会层叠，会共同作用在标签上

给同一个标签设置相同的样式，样式会层叠覆盖，通过运行顺序从前往后，会生效最后的样式。

知识分子李云龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css学习第二天

1，复合选择器由哪几种，1.1后代选择器(父选择器空格后代选择器 {})标签结构必须是父子级关系！！！子级可以有多级内容。后代包括：儿子，孙子，重孙…显示结果：样式只在后代标签中显示<style> div p { color:red }</style>......<body> <p> 这是一个p标签 </p> <div> <p> 这是一个div的子标签p
复制链接

扫一扫