CSS+ day2

已注销
274 阅读7分钟

CSS+ day2

复合选择器（后代选择器，子选择器，交集选择器，并集选择器，伪类选择器） 标签显示模式 ：块级元素，行内元素，行内块元素，a行内元素常常被转换成行内块元素。 行高：行高和高度的三种关系，为什么行高==文字高度就会使文字垂直居中。测量行高 背景 background-color -image background-repeat background-position background-attachment 背景颜色，背景图片，背景位置，背景平铺，背景附着 背景的简写 半透明 做权重 首先看看有没有选中标签 在算权重。

css的三大特性：层叠性 继承性 优先级

1.复合选择器 ：通过对基础选择器的组合。

后代选择器，子孙后代 空格 .nav a

    .nav a {
        color: red;
    }
    #wangwang li {
        color: blue;
    }
内部链接 内部链接 内部链接 
<a href="#">外部链接</a>
<a href="#">外部链接</a>
<a href="#">外部链接</a>


<ul>
    <li>一条狗</li>
    <li>一条狗</li>
    <li>一条狗</li>
</ul>

<div id="wangwang">
    <ul>
        <li>wangk</li>
        <li>wangk</li>
        <li>wangk</li>
    </ul>
</div>

4个是红色的，后代选择器

内部链接 内部链接 内部链接

子元素选择器 大于号 亲儿子元素 不包含孙子，和重孙子。 div>a { color: pink; }

只有前三个颜色变化了。
内部链接 内部链接 内部链接

内部链接

交集选择器 公共的部分，

红色

红色

蓝色

/* 交集选择器 即使p标签又是类选择器的关系 */ p.red { color: red; }

并集选择器，用逗号隔开，

  p,span {
       color: red;
   }

你好

你好

你好

<div>nihao </div>
<div>nihao </div>
<div>nihao </div>

<h3>你好</h3>
<h3>你好</h3>

<span>nihao</span>
<span>nihao</span>

    p,
    span,
    .red {
        color: red;
    }

你好

你好

你好

<div class="red">nihao </div>
<div>nihao </div>
<div>nihao </div>

<h3>你好</h3>
<h3>你好</h3>

<span>nihao</span>
<span>nihao</span>

.one,p,#op,

    .site-r a {
        color: red;
    }
    a {
        text-decoration: none;
    }

    .nav ul li a {
        color: orange;
    }

    .nav,
    .sitenav{
        font: 20px "微软雅黑";
    }

</style>
左侧导航栏
登录

伪类选择器 链接伪类选择器 一个点是类选择器，两个点是冒号伪类选择器。 向某些选择器添加特殊的效果，比如给链接添加特殊的效果，比如可以选择一个 第几个元素。

链接伪类，结构伪类， 尽量按着顺序来。 LVHA

/* 正常状态 / a:link { color: #333; } / 已经访问过的链接颜色 */ a:visited { color: yellow; }

    /* 鼠标经过 */
    a:hover {
        color: red;
    }

    /* 点击 按下不松开 */
    a:active {
        color: blue;
    }

    a {
        text-decoration: none;
    }

2.标签显示模式，

div span 为什么div可以占一行，标签的三种显示模式，特点和区别，理解三种显示模式的相互转换。

块级元素，和行内元素，行内块元素，

块级元素：h1..h6 div p ul ol li div { height: 200px; background-color:gray; width: 200px; }

块级元素： 1.独占一行 2.高度宽度外边距 内边距都可以控制。 3宽度默认是容器的100% 4.是一个容器盒子，里面可以放行内或者块级元素。

不写width 默认是给父亲一样宽度。

注意： 1.只有文字才能组成段落，p 里面不能放块级元素，特别是p不能放div. 2.h1…h6 dt 里面不好放块级元素。

3.行内元素，

行内元素； 1.一行显示。 2.设置宽高没有效果。实际是内容的宽高，跟内容有关。 3.行内元素只能放行内元素不能放div. 块级元素。

注意：1.链接里面不能再放链接 a标签里面不能再放a标签。2/特殊情况下，a可以放块级元素。

3.行内块元素，

单元格 可以设置宽高和对其方式

1.一行内显示的， 2.但是这里可以设置宽高。

dadas dadas dadas 
<img src="../images/zhoujielun.png">  
<img src="../images/liushishi.jpg">

三种模式的总结，

块级元素，一行显示一个 可以设置宽度高度 div p1… ul. ol li 默认宽度是100% 容器的包含任何标签 行内元素，一行可以放多个，不可以设置宽高度， span del a ins 默认宽度是内容的宽度。 容纳文本或其他行内元素。 行内块。一行可以放多个，可以设置宽高度， img input。默认宽度是内容的宽度。

相互转换

块转换成 行内 display：inline 行内转换成块级 display:block 块级和行内元素转换为行内块 display= inline-block.

    a {
        background-color: teal;
        display: inline-block;
        width: 100px;
        height: 100px;
    }

3.行高 行高：行高和高度的三种关系，为什么行高==文字高度就会使文字垂直居中。测量行高

基线到基线的距离称之为行高，

顶线 中线 基线 底线

基线到基线的距离

4.文本垂直居中，上距离+内容高度+下距离 3部分组成。 单行，如果行高大于高度会向下 行高等于高度会垂直居中。 行高小于高度会向上偏移。

4.css背景 背景位置

1.css背景图片，和插入图片的区别。

2.css背景属性，给页面元素添加背景样式，设置不同的背景图片的位置。 background-color:green; background-color:transparent; 默认是透明色，这里是透明的意思。

background-image: url(); 必须加一个图片 默认是none. background-image: url(../images/liushishi.jpg); //必须加url,url不要加引号。

1.背景图片是在盒子底部，而插入图片是在盒子的上层， 2.背景图片会把背景颜色盖住。 3.默认背景图片是平铺的。 background-repeat: no-repeat;
background-repeat: repeat-y;

        background-repeat: repeat-x;

4 .背景图片的位置： background-position:10px 10px; 可以跟方位名词，也可以是数字。 xy坐标 background-position: bottom left;

background-position 必须在有背景图片的 background-image的这个属性。 position x和y的坐标，

        background-position:center center;

1.如果只指定了一个，另一个方位名词是center 2.bottom left 两个顺序是没有关系的。 3.如果是数字，只给了一个，那么一定是x轴坐标。 background-position:10px center;
background-position:-10px center; 可以混用。x y ———x | | Y

.bg { width: 200px; height: 200px; background-color:yellowgreen; background-image: url(../images/zhuce.png);
background-repeat: no-repeat;
background-position: center -10px; }

4.为什么有的背景图片可以做成1920 *

背景附着 background-image: url(../images/bg1.jpeg); background-attachment: fixed; background-repeat: no-repeat; height: 6000px;

background-attachment

  1. 背景的简写

    背景颜色 背景图片 平铺 fixed 位置。 /* 背景的简写 跟font不一样，这里是没有顺序的 背景颜色，url 地址，背景平铺，背景滚动，背景位置 */ background: #ccc url(../images/bg1.jpeg) no-repeat fixed center top;

背景颜色，背景图片，背景平铺，背景位置，背景附着，背景简写，背景透明，

6.背景半透明：盒子半透明，对里面的内容没有影响。

5.CSS的三大特性：层叠性 继承性 优先级

CSS样式冲突采取的原则，常见的样式会有继承？css优先级的算法，常见选择器的叠加值？

1.层叠性 就近原则

    /* 层叠性 显示最后一个 样式不冲突不会层叠*/
    div {
        background-color: yellowgreen;
        font-size: 30px;
    }
    div {
        background-color: red;
    }

2.继承性，（text- font- line- color属性都是可以继承的， 宽度高度不继承）

    div {
        color: red;
    }
</style>

adasdsa

3.CSS的优先级

1.如果选择器相同，执行层叠样式，就近原则。 2.如果选择器不相同，

继承通配符 都是 0000 标签选择器。0001

    /* 层叠性 显示最后一个 样式不冲突不会层叠*/
    /* div {
        background-color: yellowgreen;
        font-size: 30px;
    }
    div {
        background-color: red;
    } */
    div {
        /* 0 0 0 1 小组长 */
        color: red ;
    }
    .one { 伪类
        /* 类选择器 0 0 1 0 班长 */
        color: blue;
    }
    #two {
         /* id选择器 0 1 0 0 班主任 */
        color: green;
    }

    /* style="color: yellow;行内样式表 1 0 0 0 校长 */
    /* color: blue !important; 局长*/


</style>
adasdsa

adasdsa

权重的计算公式，权重叠加 按道理是没有进位的。

继承的权重是0，要看有没有选中标签。如果没有选中，权重是0，

avatar
文章
阅读
粉丝