CSS day2

最新推荐文章于 2024-04-24 09:27:42 发布

Lonely King

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量100

点赞数

分类专栏： HTML+CSS+JS基础知识文章标签： html

本文链接：https://blog.csdn.net/qq_38353711/article/details/109602050

版权

HTML+CSS+JS基础知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第二章

1.CSS复合选择器

1.1.后代选择器

用来选择元素或元素组的子孙后代，包含元素下面的所有符合条件的元素

<head>
    <style type="text/css">
        .nav a {
            color:red;
        }
    </style>
</head>
<body>
    <div class="nav">   
        <a herf="#">内部链接</a>
        <a herf="#">内部链接</a>
        <a herf="#">内部链接</a>
    </div>
    <div class="nav">   
        <a herf="#">内部链接</a>
        <a herf="#">内部链接</a>
        <a herf="#">内部链接</a>
    </div>
</body>

1.2.子元素选择器

只选择div下面的stong元素下面，只包含本元素下面的第一级元素

<head>
    <style type="text/css">
        div>stong {
            color:red;
        }
    </style>
</head>
<body>
    <div class="nav">   
        <p>
            <stong>内部链接</stong>
            <stong>内部链接</stong>
            <stong>内部链接</stong> 
        </p>
    </div>
    <div>   
        <stong>内部链接</stong>
        <stong>内部链接</stong>
        <stong>内部链接</stong>
    </div>
</body>

1.3.交集选择器

即是标签又是类选择同时满足(用的较少，一定不能包含空格)

p.nav {color:red;}

1.4.并集选择器

并集选择器用逗号隔开，逗号理解为和的意思

p,span {color:red;}

1.5.伪类选择器

链接伪类选择器

a:link {} 未访问的链接

a:visited{} 已访问链接

a:hover{} 鼠标移动到链接上

a:active{} 选定的链接

按照lvha顺序去写，否则可能引起错误

常用写法

.nav a {
    color:#333;
    text-decoration: none;
}
.nav a:hover {
    color:red;
}

总结

选择器	作用	特征	使用情况	隔开符合及用法
后代选择器	用来选择元素后代	选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选择亲儿子	较少	符号是> .nav>a
交集选择器	选择两个标签的交集部分	即是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体申明	较多	符号是逗号 .nav,div,pz
链接伪类选择器	给链接改状态		较多	重点记录 a{} 和a:hover{}常用写法

2.标签显示模式(display)

三种显示模式

块级元素(block-level)

常见的块级元素有：<h1>~<h6> ,<p> , <div> , <ul> , <ol> , <li>等

可以控制宽高，内边距，外边距，独占一行，宽度默认是容器的100%，可以放行内元素或者块级元素

p不能放div，同h1,h2,h3,dt都是文字类标签，必能放其他块级元素

行内元素(inline-level)

常见的行内元素有：<a> ,<strong>, <b>,<em> ,<i>, <del>, <s>, <ins>,<u>,<span>等

一行显示多个，不可以控制宽高，自身的宽度由内容撑开，行内元素只能容纳文本或则其他的行内元素

链接里面不能在放链接，特殊情况a标签可以放块级元素，需要给a转换成块级元素

行内块元素(inline-block)

常见的行内块元素有：<img /> <input /> <td>等

可以显示多个，相邻的行内元素在一行之间会有空白缝隙，可以控制宽高，内边距，外边距

模式转换

display:block;

display:inlinel;

display:inline_block

3.行高(line-height)

行高是指上一行的基线与下一行的基线的距离

行高= 上距离+内容高度+下距离

行高等于高度，文字会居中显示；行高大于高度，文字会偏下；行高小于高度，文字会偏上

4.CSS背景色（background）

背景颜色:background-color:颜色值默认值 transparent 透明的

背景图:background-image:url(imgaes/mou.jpg); none无背景图(默认的)

背景平铺:background-repeat：repeat(背景纵向和横向上平铺) ; no-repeat(背景图像不平铺) ; repeat-x(背景横向平铺) ;repeat-y(背景纵向平铺)

背景位置:background-position:x坐标 y坐标；background-position:right top; background-position:center center;

背景附着:background-attachment:fixed(背景固定); scroll(背景随内容滚动)

background:背景颜色背景图片地址背景平铺背景滚动背景位置

background:#ccc url(images/sms.jpg) no-repeat fixed center top;

背景透明background:rgba(0,0,0,0.5);

5.CSS三大特性

5.1.CSS层叠性

样式冲突，遵循的原则是**就近原则***，那个样式理结构近，就执行那个样式

5.2.CSS继承性

子标签会继承父标签的某些样式，文字验收和字号，降低样式的复杂性

子元素可以继承父元素的样式有:text- , font- ,line- 这些元素开头，以及color属性

5.3.CSS优先级

权重计算公式

选择器不同，就会出现优先级问题，继承的权重为0

标签选择器	计算权重
继承或者*	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内style=""	1,0,0,0
每个!important	无穷大

Lonely King

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS day2

第二章1.CSS复合选择器1.1.后代选择器用来选择元素或元素组的子孙后代，包含元素下面的所有符合条件的元素<head> <style type="text/css"> .nav a { color:red; } </style></head><body> <div class="nav"> <a herf=
复制链接

扫一扫