CSS笔记02

最新推荐文章于 2022-07-20 19:34:12 发布

KempRong

最新推荐文章于 2022-07-20 19:34:12 发布

阅读量161

点赞数

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

本文链接：https://blog.csdn.net/KempRong/article/details/80113452

版权

CSS基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS笔记02

css复合选择器

后代选择器（选中所有后代）：

CSS：

    div p{
        /*选择div包含的p  后代选择器*/
    }

HTML结构为：

    <p>王可可是一条狗</p>
    <div>
        <p>王可可是一条狗</p> <!--选中-->
    </div>

CSS：

    <style>
        .sicong p {
            color：pink；
        }
    </style>

HTML：

    <div class="sicong">
        <p>王可可是一条狗</p>
    </div>

CSS：

    .nav ul{
        color: red;
    }

HYML:

    <div class="nav">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

子代选择器（只选择儿子）：

    <style>
    /*选择h1下一级的strong*/
        h1 > strong{
            color: pink;
        }
    </style>
    <h1>
        <strong><!-- 选中 -->
            very
        </strong>
        <strong><!-- 选中 -->
            very
        </strong>
        666
    </h1>

    <h1>
        <em>
            <strong>
                very
            </strong>
        </em>
        666
    </h1>

并集选择器:

<style>
    div,
    span，
    .demo{
        color:pink;
    }
</style>
<!--让div和span里面的元素变成粉红-->
<p>123</p>
<p>123</p>
<p>123</p>
<div>345</div>
<div>345</div>
<div>345</div>
<span>678</span>
<span>678</span>
<span class="demo">678</span>

交集选择器：

<style>
/*p与.demo之间没有空格！！！*/
    p.demo{
        color: red;
    }
</style>
<!--只让p中含demo的元素变红-->
<p>123</p>
<p class="demo">123</p>
<p>123</p>
<div>456</div>
<div class="demo">456</div>
<div>456</div>
<div>456</div>

伪类选择器：
顺序不能变！！中间没有空格！

<style>
    /*没有访问过的链接状态：*/
    a:link{
        color: #333;
        text-decoration: none;
    }

    /*点击访问过的状态*/
    a:visited{
        color: orange;
    }

    /*鼠标经过时的状态--常用*/
    a:hover{
        color: #f12510
        font-weight:700;
    }

    /*选中链接时的状态*/
    a:active{
        color: #ffff00;
    }

</style>

~可以应用于a div等元素中~

<a href="https://www.baidu.com">
    百度一下
</a>

子元素伪类：

div p span:nth-child(n){
    /*选择第n个子元素
    另外有even:偶数元素
          odd:奇数元素*/
}

否定伪类（剔除）：

div p span:not(选择器){

}

html标签分类

1.块级元素：
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

等，其中<div>标签是最典型的块元素。

<style>
    div{ 
        width: 200px;
        height: 200px;
        text-align: center;
        background-color: #666;
    }
</style>

（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
（5）是一个容器及盒子，里面可以放行内或者块级元素

2.行内元素
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

<style>
    span{
        width: 200px;/*无效*/
        height: 200px;/*无效*/
        background-color: #666;
    }
</style>

（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊 a里面可以放块级元素）

注意：
只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
链接里面不能再放链接。
*特殊情况a里面可以放块级元素

3.行内块元素
在行内元素中有几个特殊的标签<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

<style>
    input{
        width: 200px;
        height: 300px;
    }
</style>

4.标签显示模式转换 display
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;

<style>
    /*块级转行内：*/
    div{
        display: inline;
    }
    /*行内转块级：*/
    span{
        display:block; 
    }
    p{
        display: inline-block;
    }
</style>

行高=高度可相当于垂直居中~
背景图片：background: url( );

css三大特性：

1.层叠性
1>样式冲突，遵循的原则是就近原则。哪个样式离着结构近，就执行那个样式（同一类）。
2> 样式不冲突，不会层叠

2.继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

3.※优先级

行内式写样式>id选择器>类选择器>标签选择器>*和继承（继承的权重为0）
例如：
div ul li ——> 0,0,0,3

.nav ul li ——> 0,0,1,2

a:hover —–—> 0,0,1,1

.nav a ——> 0,0,1,1

#nav p —–> 0,1,0,1

慎用混合选择器，父级优先级再高不会影响自己

背景：
background-color: ;背景颜色

background-image: url();背景图片地址

background-repeat:no-repeat / repeat-x / repeat-y; 是否平铺

※background-position: x坐标 y坐标 / top/center/bottom/right/left;背景位置(方位名词可以组合，如中上：center top，只写一个，则另外一个默认居中对齐；可以使用精确单位如：20px 70px 左上角为原点；可以混搭)

background-attachment : scroll(图滚动)/fixed（图不动）背景固定还是滚动

复合属性：

background：背景颜色 图片地址 平铺情况 滚动情况 位置；
background：#fff url() no-repeat fixed center;

background-transparent
background: rgba(255,255,255,0.3)最后是背景透明度的值

KempRong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记02

CSS笔记02css复合选择器后代选择器（选中所有后代）：CSS： div p{ /*选择div包含的p 后代选择器*/ }HTML结构为： &lt;p&gt;王可可是一条狗&lt;/p&gt; &lt;div&gt; &lt;p&gt;王可可是一条狗&lt;/p&gt; &lt;!--选中--&gt;...
复制链接

扫一扫

专栏目录