css-初学者必备(2)

最新推荐文章于 2022-03-30 14:03:34 发布

M.Arbre

最新推荐文章于 2022-03-30 14:03:34 发布

阅读量106

点赞数

分类专栏： css 文章标签： css css-初学者必备

本文链接：https://blog.csdn.net/lnh1998/article/details/100902093

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习目标(2):

1.熟记CSS样式和外观属性

2.熟练掌握CSS各种选择器

3.熟练掌握CSS各种选择器

4.熟练掌握CSS三种显示模式

5.熟练掌握CSS背景属性

内部样式

<head>
<style type="test/css">
选择器{属性1：属性值1； 属性2：属性值2；属性3:属性值3;}
</style>
</head>

行内式

<标签名 style="属性1：属性值1； 属性2：属性值2；属性3:属性值3;">内容</标签名>

外部样式表

<head>
<link href="css文件的路径" type="text/css" rel="stylesheet"/>
</head>

三种样式表总结

样式表	优点	缺点	使用情况	控制范围
行内样式	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

标签显示模式（display）

为了更好的适应环境而完成的自然选择

块级元素（block-level）

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>  其中<div>标签是最典型的块元素

特点：

总是从新行开始
高度、行高、外边距及内边距都可以控制
高度默认是容器的100%
可以容纳内联元素和其他块元素

行内元素（inline-level）

<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span> 其中<span>标签最典型的行内元素

特点：

和相邻行内元素在一行上。
高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或则其他行内元素

块级元素和行内元素区别

块级元素特点：

总是从新行开始
高度、行高、外边距及内边距都可以控制
高度默认是容器的100%
可以容纳内联元素和其他块元素

行内元素特点：

和相邻行内元素在一行上。
高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或则其他行内元素

标签显示模式转换display

快转行内：display：iniline
行内转块：display：block
块、行内元素转换为行内块：display：inline-block
此阶段，我们只需关心这三个，其他的是我们后面的工作

css复合选择器

复合选择器是有两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签

交集选择器

交集选择器是并且的意思即…又…的意思

p.one 选择的是：类名为.one的段落标签

并集选择器

并集选择器和的意思，就是说，只要逗号隔开的所以选择器都会执行后面的样式

.one,p,#test{color:#F00;}
表示.one和p和#test 这三个选择器都会执行颜色为红色  通常用于集体声明

后代选择器

他能选择任何包含在内的标签

.class h3{color：red；font-size：25px}

子元素选择器

子元素选择器是指选择符合条件的子元素，需要运用到>符号，下面通过实例来看一下：

.class > p{
color: green;
background-color: orange;
}

属性选择器

选取标签带有某些特殊属性的选择器我们称为属性选择器

 div[class^=font]{ /*  class^=font 表示 font 开始位置就行了 */
            color: red;
        }
        div[class$=footer]{ /*  class$=footer 表示 footer 结束位置就行了 */
            font-size: 30px;
        }

        div[class*=tao]{  /* class*=tao  *=  表示tao 在任意位置都可以 */
            color: aqua;
        }

<div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="24font">属性选择器123</div>
    <div class="sub-footer">属性选择器footer</div>
    <div class="jd-footer">属性选择器footer</div>
    <div class="news-tao-nav">属性选择器</div>
    <div class="news-tao-header">属性选择器</div>
    <div class="tao-header">属性选择器</div><hr/>

伪元素选择器（css3）

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行
E::selection 可改变选中文本的样式

p::first-letter{  /* 选择的是当前文本的第一个单词或者第一个文字  */
             font-size: 30px;
             color: yellow;
         }
p::first-line{ /*  选中的是第一行 */
            color: chartreuse;
        }
p::selection{ /*  可以改变当前选中文字的样式   */
            color: pink;
        }

E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用

  p::before{
            content:"开始";
        }
  p::after{
            content: "结束";
        }

css书写规范

空格规范

【强制】选择器与 { 之间必须含空格
示例 .selector{}

【强制】属性名与之后的；之间不允许包含空格，：与属性值之间必须包含空格
示例 font-size:12px;

选择器规范

【强制】当一个rule包含多个selector时，每个选择器声明必须独占一行

【建议】选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确

属性规范

【强制】属性定义必须另起一行

.selector{
margin: 0;
padding: 0;
}

【强制】属性定义后必须以分号结尾

.selector{
margin: 0;
padding: 0;
}
 
/*bad*/
.selector{
  margin: 0
 }

css背景（background）

background-color 背景颜色
background-image 背景图片地址
background-repeat 是否平铺
background-position背景位置
background-addachment背景固定还是滚动

背景图片（image）

语法：
background-image:none | url(url)
参数：
none：无背景图（默认的）
url：使用绝对或者相对地址指定背景图像
backg-image背景图片
小技巧：提倡背景图片后面的地址，url不要加引号。

背景平铺

语法：background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数：
repea：背景图像在纵向和横向上平铺（默认的）
no-repeat ：背景图像不平铺
repeat-x：背景在横向上平铺
repeat-y：背景在纵向上平铺
设置背景图片时，默认吧图片在水平和垂直方向平铺以铺满整个元素。
在这里插入图片描述

背景平位置（position）

语法：
background-position:length || length
background-position:position || position
参数：
length：百分数 | 有浮点数字和单位表示符组成的长度值。
position ：top | center | bottom |left |center |right
说明：
1.position后面的x坐标和y坐标，可以使用方位名词或者精密单位
2.如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标在后面

背景附着

语法：
background-attachment:scroll | fixed
参数：
scroll：背景图像十岁对象内容滚动
fixed：背景图像固定
说明;
设置或检索背景图像是随对象内容滚动还是固定的。

背景简写

background属性的值的书写顺序推荐
background：背景颜色背景图片地址背景平铺背景滚动背景位置

背景透明（css3）

格式：background：rgba(0,0,0,0.3)
最后一个参数是alpha透明度取值范围在0-1之间
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

背景缩放（css3）

通过background-size设置背景图片的尺寸
参数设置：
1.长度单位px或百分比（参照盒子的宽高）
2.设置为cover时，会自定调整缩放比例，保证图片始终填满背景区域。一处会被隐藏
3.设置为contain会自动调整缩放比例，保证图片始终填满背景区域。

多背景（css3）

以逗号分隔可以设置多背景，可用于适应布局
1.一个元素可以设置多重背景图像
2.每组熟悉年使用逗号分隔
3.如果设置的多重背景图之间存在这交集，前面的覆盖后面的
4.为了便面背景色讲图像盖住，背景色通常都定义在最后一组上

凹凸文字

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #CCCCCC;
        }
        div{
            color: #CCCCCC;
            font: 700 80px "微软雅黑";
        }
        div:first-child{
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }
        div:last-child{
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }
    </style>
</head>
<body>
    <div>我是凸起的文字</div>
    <div>我是凹下的文字</div>
</body>

效果：
在这里插入图片描述

M.Arbre

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css-初学者必备(2)

学习目标(2):1.熟记CSS样式和外观属性2.熟练掌握CSS各种选择器3.熟练掌握CSS各种选择器4.熟练掌握CSS三种显示模式5.熟练掌握CSS背景属性内部样式<head><style type="test/css">选择器{属性1：属性值1；属性2：属性值2；属性3:属性值3;}</style></head>行内式...
复制链接

扫一扫