CSS学习笔记—2

最新推荐文章于 2024-05-30 14:49:04 发布

:))-

最新推荐文章于 2024-05-30 14:49:04 发布

阅读量108

点赞数

本文链接：https://blog.csdn.net/lcx16/article/details/82870382

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.关于placeholder

text-indent:2em;首行缩进

cursor：pointer/help/move;设置鼠标为小手模式

2.元素显示方式

是将标签按照自己的显示效果进行分类：

◇块级元素

代表：

div , p, ul,li,ol,dl,dd,h1,h2..........

特点：●默认情况下，如果一个块级元素未设置宽度，那么该元素的宽度等于其父元素的宽度，

高度等于其内容撑开的高度。

●所有的块级元素都是独占一行显示的

●块级元素是可以直接设置宽度和高度的

◇行内元素

代表：span, a,font,s,em,i,del.............

特点：●行内元素默认宽度等于其内容的大小。

●行内元素在一行上显示。

●行内元素不能直接设置宽度和高度。

◇行内块元素 【在CSS标准中属于行内元素的范畴】

代表：img, input

特点：可以设置宽度和高度

行内块元素可以在一行显示

3.模式转换

◇转换为块级元素

display:block;

◇转换为行内元素

display:inline;

◇转换为行内块元素

display:inline-block;

注意：●不要将行内块元素转化为行内元素

● 在网页中，根据网页效果，与要进行模式转换时，我们才用模式转换

●一般情况下，如果涉及到模式转换，都是将元素转化为块级元素或者行内块元素

4.伪元素

伪：假的HTML标签

伪元素：

：：before{}

：：after{}

注意：●伪元素中必须设置content属性；

●伪元素属于行内元素；

● 伪元素不能嵌套伪元素

●在HTML标签中，before代表第一个标签，after代表最后一个标签

5.伪类选择器

：hover{ }

当鼠标悬停到某个标签上，设置样式。

◆a:link {} -------->在IE低版本中有问题

◆a{} -------->推荐使用a标签

设置标签默认链接的样式

◆ :visited{} 设置标签被访问过后的样式

注意：

◆:visited 有浏览器缓存问题

◆在:visited选择器中，只能设置与颜色有关的属性

◆a:active{} 设置标签被激活后的样式

6 .CSS（层叠样式表）特性

1、层叠性

在同一个标签身上，如果优先级相同且设置的样式发生冲突，那么最后定义的样式会将前面定义的样式覆盖。

例如：

2、继承性

（1）继承性：继承性发生在嵌套关系的标签中；如果给父元素设置样式，子元素也受到父元素样式的影响

（2）总结

◆可以被继承的属性有：

color、与font属性相关的都可以被继承（font-size、font-weight......）、text-align

◆不能被继承的元素有：宽度和高度、背景颜色。

（3）继承的特殊标签

◆a标签不能直接受父元素中的文字颜色的影响

◆标题标签不能直接等于父元素中文字的大小

3、优先级

标签选择器 < 类选择器 < ID选择器 < 行内样式 < ！important

10 100 1000 10000 10000以上

◆继承的权重为0

◆权重可以叠加（选择器指向同一个标签的时候）

7.背景

（1）复合属性：

◆background-color:设置背景颜色

◆background-image:none|url(url使用相对或绝对地址指定背景图片) 设置背景图片

◆background-repeat:repeat|no-repeat|repeat-x|repeat-y 设置背景图片平铺方式

参数：

repeat:背景图像在纵向上和横向上平铺

no-repeat：背景图像不平铺

repeat-x：背景图像在横向上平铺

repeat-y：背景图像在纵向上平铺

◆设置背景图片位置

background-position：length||length

background-position：position||position

参数：

length：百分数|有浮点数字和单位标识符组成的长度值。

position：top | center | bottom | left | right

注意：

◆如果设置一个值，第二个值代表默认垂直居中。

◆该属性可以同时设置具体值和具体的关键字

◆如果设置的值中包含具体数字，第一个值代表水平方向，第二个值代表的是垂直方向。

（2）background属性联写

注意：

◆没有属性个数的限制

◆没有顺序的限制

附：导航练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       .nav{
           background-color:cornflowerblue;
           height: 100px;
           text-align: center;/*内容居中*/
       }
        .nav a{
            text-decoration:none;/*去掉下划线*/
            font-weight: bold;/*加粗*/
           /*a标签为行内元素，设置宽度高度无用*/
            width:90px;
            height:100px;
            display:inline-block;/*转换为行内块元素*/
        }
        .red{/*同作用.nav .red*/
            color: red;
        }
       .black{ /*同作用.nav .black*/
            color: black;
        }
        .nav a:hover{/*点击时改变背景颜色*/
            background-color:palegreen;
            text-decoration: underline;/*设置下划线*/
        }
    </style>
</head>
<body>
<div class="nav">

    <a href="#" class="red" title="天猫">天猫</a>
    <a href="#" class="red" title="聚划算">聚划算</a>
    <a href="#" class="black" title="阿里旅行">阿里旅行</a>
    <a href="#" class="black" title="电器城">电器城</a>

</div>

</body>
</html>

:))-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记—2

1.关于placeholdertext-indent:2em;首行缩进cursor：pointer/help/move;设置鼠标为小手模式2.元素显示方式是将标签按照自己的显示效果进行分类：◇块级元素代表： div , p, ul,li,ol,dl,dd,h1,h2.......... 特点：●默认情况下，如果一个块级元素未设置宽度，那么该元素的宽...
复制链接

扫一扫