CSS-1-阿里云开发者社区

CSS-1

1-CSS初识

01-CSS定义

英文全名：cascading style sheets 层叠样式表

WEB标准中的表现标准语言，简单说就是如何修饰网页信息的显示样式。

目前推荐遵循的是W3C发布的CSS3.0

1998年5月21日由w3C正式推出的CSS2.0

02-CSS语法

选择器（选择符） { 属性:属性值；属性:属性值；}

重点注意！！花括号{}一定要写、属性:属性值——当中的冒号是英文输入法下的冒号、分号代表一句声明的结束。

选择器（选择符）—— 如果你想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素，在CSS中，执行这一任务的样式规则部分被称为选择器，有的地方也会叫选择符。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kIJZzAIe-1642169603946)(D:\LAN\日常笔记\笔记图片\选择器（选择符）)]

找到目标元素——第一个段落，执行文字变黄的样式规则即（声明）

{ 属性:属性值；属性:属性值；} —— 属性:属性值；即（声明：声明又分为属性和属性值。）属性：是指想要修饰的样式属性，比如宽度、高度、颜色等；每个属性都有一个值，这个值就是属性值，例如：400px,red等。

03-CSS的引入方式

内部样式、外部样式、行内样式

内部样式：

<head>
<style type="text/css"> —————— 第二步：在head里面书写标签style
                                      （style标签最好写在head里面，type属性可加可不加）
  p{
   color:red;  /* color设置字体颜色 */ —————— CSS中的注释格式
     font-size:30px; /* font-size 设置文字大小 */
                     /* 在书写CSS的时候，如果没有特殊规定，数值必须带单位 px 像素 */
  }     
  div{
      font-size:80px;
      color:orange;
  }
</head>
<body>
  <p>我是第一个段落</p> —————— 第一步：在HTML结构中创建对象元素
  <p>我是第二个段落</p> —————— 结构创建对象  <!-- HTML中的注释格式 -->
  <div>我是尾部</div>  —————— 结构创建对像
  <div>我是底部</div>  —————— 结构创建对象
</body>
————————————————
版权声明：本文为CSDN博主「橘 日向」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Charlotte_99/article/details/122503382

外部样式：

<body>
    <!--1/创建想要修饰的对象 -->
    <div>看最美风景</div>
    <div>我都愿意去爱你</div>
    <p>嫌弃</p>
    <p>期待没发生的事情到来</p>
</body>

第二步：建立外部CSS文件

/*  在CSS文件中，不再需要style标签了 */
div{
  color:blue;
  font-size:0.625rem  
}
p{
  color:red;
  font-size:0.9375rem 
}

第三步：建立两者关联

<!-- 方式1、用link链接  rel-relation定义关联性 stylesheet 样式表  type可写可不写  重点掌握方法一-->
<link rel="stylesheet" href="02CSS外部样式.css"  type="text/css"/> 
<!-- 方式2、用import导入 -->
<style>
  @import url('02CSS外部样式.css')
</style>

行内样式、内联样式、嵌入式样式

<!-- 行内样式、嵌入式样式、内联样式 -->
<!-- 1、先创建想要修饰的对象 -->
<!-- 2、在标签内部书写style属性-->
    <div style="font-size:30px;color:green;">你就这样拥抱着我</div>
    <div style="font-size:40px; color:red;">抱着我，抱着我</div>
    <div style="font-size:50px;color:pink;">悠着点，别太入戏</div>
<!-- 行内样式知道有就行了，仅作了解，避免大面积去书写-->
<!-- 缺点：会造成很乱的页面结构，修改的时候比较麻烦-->

04-CSS样式表的使用场景：

1、内部样式：适合案例或者短小的页面开发

2、外部样式：适合整站或者比较长的页面开发

3、行内样式：几乎不用

CSS解析规则：

如果对同一个标签同时使用了3种样式表：

1、同时使用内部、外部、行内样式表修饰同一个标签的时候，优先级别最高的是行内样式表。

2、当外部和内部样式表同时使用的时候，解析规则遵循就近原则，哪个CSS样式距离标签近就最终显示哪个样式。

2-CSS选择器

01-选择器的分类

基本选择器、层次选择器、伪类选择器、属性选择器、伪对象选择器

大类还有很多个小类，总计20多个选择器

02-基本选择器

包括类型选择器、Class选择器、id选择器、通配符、群组选择器

<div>美羊羊</div>
<div>懒羊羊</div>
<div>沸羊羊</div>
<div>慢羊羊</div>
<p>红太狼</p>
<p>灰太狼</p>
<p>小灰灰</p>
<p>小灰灰媳妇</p>

需求1：所有的div ，文字大小是20，字体颜色是红色

需求2：所有的p ，文字大小是30，字体颜色是橘色

需求3：慢羊羊变成绿色沸羊羊变成蓝色

1、类型选择器（标签选择器）

以HTML中的标签作为选择符

A、什么时候用？

想改变某个元素的默认样式时或者统一文档某个元素的显示效果时

<!--这类选择器使用的时候能达到所有的长成我们想要的样式，但是达不到区分的效果-->

B、语法？

标签{  属性:属性值；   }    例如： div{   color:red;   }
满足需求1和2：
<head>
<style>
  div{
    font-size:20px;
    color:red;
}
  p{
    font-size:30px;
    color:orange;
  }
</style>
</head>
<body>
  <div>美羊羊</div>
  <div>懒羊羊</div>
  <div>沸羊羊</div>
  <div>慢羊羊</div>
  <p>红太狼</p>
  <p>灰太狼</p>
  <p>小灰灰</p>
  <p>小灰灰媳妇</p>
</body>

2、Class选择器（类选择器）

A、什么时候用？

想要区分某个或者某些标签的时候，比如想要区分两个div; 开发的时候用

<!--class可以给多个属性值，多个属性值之间用空格隔开。 -->
写在HTML标签内部
例如：<div class="box yang yanglan "></div>

B、语法？

.Class名字{  属性：属性值； }   例如： .box{  color:green; }
<!-- Class属性值的注意点：
1、不能是纯数字开头
2、不建议使用中文，因为容易造成乱码
3、如果需要符号配合，可以使用-或_,其他符号不可以@￥%
4、建议命名的时候，采用语义化命名
box-盒子 head-头部 foot-尾部
-->
满足需求3：
<head>
   <style>
       .fyy{
           color:blue;
       }
       .myy{
           color:green;
       }
    </style> 
</head>
<body>
  <div>美羊羊</div>
  <div>懒羊羊</div>
  <div class="fyy yy ">沸羊羊</div>
  <div class="myy yyy" >慢羊羊</div>
  <p>红太狼</p>
  <p>灰太狼</p>
  <p>小灰灰</p>
  <p>小灰灰媳妇</p>
</body>

3、Id选择器

A、什么时候用？

想要区分某个或者某些标签的时候，比如想要区分两个div; JS交互的时候用

<!--注意点：ID有唯一性，属性值只能是1个-->
id写在HTML标签里
<div id="box"></div>

B、语法？

#id名字{ 属性：属性值； }   例如： #box{ color:blue;}
<head>
   <style>
       #fyy{
           color:blue;
           font-size:30px;
       }
       #myy{
           color:green;
           fontsize:50px;
       }
    </style>
</head>
<body>
  <div>美羊羊</div>
  <div>懒羊羊</div>
  <div id="fyy">沸羊羊</div>
  <div id="myy">慢羊羊</div>
  <p>红太狼</p>
  <p>灰太狼</p>
  <p>小灰灰</p>
  <p>小灰灰媳妇</p>
</body>

4、通配符

A、什么时候用？

想让所有的标签同时改变样式的时候

B、语法？

*{ 属性：属性值； } 例如： *{ color:red; }
<head>
   <style>
*{
    color:yellow;
}
    </style>
</head>
<body>
  <div>美羊羊</div>
  <div>懒羊羊</div>
  <div>沸羊羊</div>
  <div>慢羊羊</div>
  <p>红太狼</p>
  <p>灰太狼</p>
  <p>小灰灰</p>
  <p>小灰灰媳妇</p>
</body>

5、群组选择器

A、什么时候用？

当几个元素样式一样的时候。可以共同调用一个声明，元素之间用逗号分隔

B、语法？

选择器1,选择器2,选择器3{ 属性：属性值； }   例如： .box,#xyy,p{ color:red; }
<head>
   <style>
div,.htl,#xhh{
    color:red;
}
    </style>
</head>
<body>
  <div>美羊羊</div>
  <div>懒羊羊</div>
  <div>沸羊羊</div>
  <div>慢羊羊</div>
  <p class="htl,tl">红太狼</p>
  <p>灰太狼</p>
  <p id="xhh">小灰灰</p>
  <p>小灰灰媳妇</p>
</body>

CSS权重（特殊性）

A、什么是权重？

权重类似人的体重，是用来衡量CSS代码优先级的一个参考值，权重值越大，代表优先级越高，权重值越小，优先级越低。

B、表达方式？

CSS中用四位数字表示权重，权重的表达方式如：0，0，0，0 ——默认为四个0

案例模拟敲写代码——搭建页面布局

每一部分的页面居中位置叫做版心（安全区）

03-层次选择器

1、后代选择器（也叫包含选择器）

语法： 选择符1（空格）选择符2 {  属性:属性值； }  /*选择符个数无限制*/
书名：含义就是选择符1 中包含的所有 后代选择符2；
<div class="third">
  <div class="third-center">
    <ul>
      <li class="third-nav"><a href="#">导航1</a></li>
      <li class="third-nav"><a href="#">导航1</a></li>
      <li class="third-nav"><a href="#">导航1</a></li>
      <li class="third-nav"><a href="#">导航1</a></li>    
    </ul>
需求：选择到所有的li
1 .third li{}
2 .third .third-center ul li{}
3 .third-center li{}
4 .third .third-center  li{}
5 ul li{}
这五种都可以

2、子选择器

3、相邻兄弟选择器

4、通用兄弟选择器

3-CSS属性

float浮动属性

页面布局：页面布局的时候使用的div盒子经常都是竖着排列的，但是有时候也需要横向排列，想要竖着排列的盒子横着过去就需要用到浮动

浮动属性：float 
属性值：left 从左往右边开始浮动、 right 从右边往左开始浮动、 none 默认值，不浮动

正常文档流：竖向排列，独占一行
/* 一个盒子给了浮动之后，该盒子会悬空不占位置，这个现象叫脱离网页文档流，浮动之后的盒子与其他不浮动的元素会发生重叠；但是不会与文字发生重叠，文字会环绕浮动元素显示。*/
当一个元素不再在文档流中占据空间，而是漂浮在文档流的上方的时候，这个现象叫做脱离文档流。
浮动会脱离网页文档，与其他不浮动的元素发生重叠；但是不会与文字发生重叠，文字会环绕浮动元素显示。
文字环绕效果，网页开发中比较少见。

实践知识点：

margin- 外间距 padding- 内间距

整个网页书写结构完毕后发现最上面有个外间距是body标签的

margin属性

页面中间距设置：用margin或者padding

间距是在盒子外面的时候，就用margin；间距是在盒子里面的时候，就用padding

外间距：

margin-外间距
使用场景：页面中需要设置间距，且间距对于容器来说是外面的时候用
用法：
单独设置
   margin-top 外上间距  margin-bottom 外下间距  margin-left 外左间距 
   margin-right 外右间距
简写
   margin:10px 20px 30px 40px;  上 右 下 左
   margin:10px 30px 10px; 上 左右 下
   margin:20px 40px; 上下 左右
   margin:20px; 四个方向
另外一种用法：
   margin:auto; /* 一个有宽度的元素在浏览器中横向居中 */
/* margin属性值是auto的时候，暂时只支持左右间距自动调整，上下不支持 */
版心居中，可以用margin：auto；实现
   margin的属性值可以给负数
   margin-left: 100px; 
/* 当给了margin-left后，该盒子是在原来的位置基础上向右移动了100px*/
   margin-left:-100px;
/* margin支持负数，给负数的结果，就是在正数的基础上，反向进行位置移动，现在盒子是向左移动了100px  */

margin遇见的问题：

margin-top的传递问题

现象：默认情况下给子元素添加了margin-top之后，浏览器解析的时候，会把这个上间距也传递给父元素，导致父元素也会下来。

解决方法：A、给最近的父元素添加border-top
         B、给父元素添加overflow:hidden；(溢出隐藏)
.box1 {
  background-color: red;
  /* border-top:1px solid transparent; */  方法一
  /* border-top上边框 solid实线  transparent透明色 */
  overflow: hidden;     方法二
}
.box1-center {
  background-color: purple;
  height: 100px;
  width: 100px;
  margin-top: 100px;
}
<div class="box1">
  <div class="box1-center">我是小盒子</div>
</div>

margin外间距重叠问题

现象：默认的情况下，两个相邻的盒子，给一个盒子添加了margin-top。另外一个盒子添加margin-bottom之后，这两个垂直的间距会重叠，显示最大数值的间距。

解决办法：A、给下面的盒子添加父元素。且添加声明overflow:hidden(溢出隐藏)
.box3 {
  background-color: yellow;
  margin-bottom: 100px;
}
.bos {
  overflow: hidden;
}
.box4 {
  background-color: green;
  margin-top: 50px;
}
<div class="box3">111</div>
<div class="bos">
  <div class="box4">111</div>
</div>

padding属性

内间距

padding-内间距/填充/补白
使用场景：页面中需要设置间距，且间距对于容器来说是里面的时候用
用法：
单独设置
padding-top 内上间距 padding-bottom 内下间距 
padding-left 内左间距 padding-right 内右间距
简写
padding:10px 20px 30px 40px;  上 右 下 左
padding:10px 30px 10px; 上 左右 下
padding:20px 40px; 上下 左右
padding:20px; 四个方向
Padiing没有auto和负数的写法
注意点：padding是添加在盒子大小之上的，所以会把盒子给撑大
解决方法：从宽度或者高度上减去添加的padding值

4-控制台差错

书写的css代码没有显示

1、基础性错误导致

单词写错或者单位没带—浏览器控制台有黄色报错

冒号没有写或者写错—黄色报错，但是后面会有多余的符号补充

分号没有结尾—黄色报错，同时后面的代码也会一起报错

{}前出错，在控制台上看不到写过的CSS代码

css语法不对，带的点没有带或者写成了#

css语法不对，名字不一致，下面写的box，上面写成了box1

{}少了}，那么控制台上会有很多报错

2、因为权重导致的

权重是否相同，如果是权重造成的代码不显示，控制台是没有黄色报错，只有代码被划掉

权重相同，跟css代码的书写顺序有关，谁的代码距离html代码近就解析谁（就近原则）

权重不同，高权重覆盖低权重的css样式

5-css文本相关属性

属性               
/* font-size-字体大小 */  
  单位可以是px，pt，em等 3pt=4px 1em=16px  浏览器默认是16px，设计 图常用字号是12px  
/* color-颜色  */
  color:red;  color:#ff0;  color:rgb(255,0,0) rgba(255,0,0,1)
  r - red红色  g - green绿色  b - blue蓝色 rgb取值范围是0-255   alpha - 透明程度 取值是0-1  0全透明 1不透明 
/* font-family-字体 */  
  当字体是中文字体，英文字体中有空格是，需加双引号；多个字体中间用逗号链接，先解析第一个字体，如果没有解析第二个字体，以此类推  
/* font-weight-加粗 */  
  font-weight:bolder（更粗的）/bold（加粗）/normal（常规）  font-weight:100-900; 100-500不加粗  600-900加粗  数字不加单位，不为小数  
/* font-style-倾斜  */ 
  font-style:italic（斜体字）/oblique（倾斜的文字）/normal（常规显示）  
/* text-align-文本水平对齐  */ 
  text-align:left; 水平靠左  text-align:right; 水平靠右         text-align:center; 水平居中  text-align:justify; 水平两端对齐，只对多行起作用 text-align-last:justify; 单行文本两端对齐
/* line-height行高 */
  行高指的是2行文字基线到基线、顶线到顶线、中线和中线之间的垂直距离
也是字号大小+上间距+下间距的距离，这里的上间距、下间距就是半行间距。
line-height的数据<height的数据，可以实现单行的文本垂直靠上对齐
line-height的数据=height的数据，可以实现单行的文本垂直居中
line-height的数据>height的数据，可以实现单行的文本垂直靠下对齐
当line-height:1; 是字号大小的1倍  不带单位的时候
当line-height:100%; 是字号大小的1倍  单位是%的时候
/*当line-height:1;和line-height:100%;可以清除文字自带的垂直间距*/
/* font文字简写 */
font是font-style font-weight font-size / line-height font-family的简写。
font:italic bold 50px/50px "宋体";
顺序不能改变，必须同时指定font-size 和 font-family属性时才起作用
/* text-decoration文本修饰*/
text-decoration:none没有/underline下划线/overline上划线/line-through删除线；
/* text-indent首行缩进*/
text-indent可以取负值； text-indent属性只对第一起作用
去除列表符号样式的css属性
list-style:none;
有超链接a 就要给它做CSS属性字体颜色
————————————————
版权声明：本文为CSDN博主「橘 日向」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Charlotte_99/article/details/122503382

行高示意图：

半行间距示意图

6-css列表属性

/* list-style-type 定义列表符号样式*/
  list-style-type:disco(实心圆)/circle(空心圆)/square（实心方块）/none（去掉符号）；
/* list-style-image 将图片设置为列表符号样式*/
  缺点：能显示小图片，但是大小和位置调整不了
  list-style-image:url(图片的路径);
  可以用：background(背景)
  background:url(1.jpg) no-repeat(不要平铺) left（水平靠左）center（垂直居中）;
/* list-style-position 设置列表项标记的放置位置*/
  list-style-position:outside;列表li的外面 默认值
  list-style-position:inside;列表li的里面
/* list-style 简写以上属性，顺序可乱，之间用空格隔开*/
list-style:inside url(2.jpg);
list-style:inside square;

7-css边框属性

/* border-width 设置边框的宽度*/
/* border-color 设置边框的颜色*/
/* border-style 设置边框的线形*/
  border-style:solid(实线)/dashed(虚线)/double(双线)/dotted(点状线)；
/* border 简写以上属性，顺序可乱，之间用空格隔开*/
  单边框 border-top border-bottom border-left border-right
/* 单边框也可以简写以上属性，规则同border */
/* 边框书写三角形：注意每行代码书写的顺序不能变！*/
  .box10{   /* 对的顺序*/
    border:10px transparent solid;
    border-top:10px red solid;
    width:0;
    height:0;
  }
  .box9{   /* 顺序错了 显示不出来三角形 */
    border-top:10px red solid;
         border:10px transparent solid;
    width:0;
    height:0;
  }
————————————————
版权声明：本文为CSDN博主「橘 日向」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Charlotte_99/article/details/122503382

8-css背景相关属性

/* background-color 背景颜色*/
  background-color:red;
/* background-image 背景图片*/
  background-image:url();背景图片不占位置且是平铺显示的
/* background-repeat 背景图片的平铺*/
  background-repeat:no-repeat/repeat/repeat-x（横向平铺）/repeat-y（纵向平铺）;
/* background-position 背景图片的定位*/
    background-position:水平位置 垂直位置；可以给负值（轴坐标）    水平位置：left、right、center 垂直位置：top、center、bottom
/* background-attachment 背景图片的固定*/
  background-attachment:scroll(滚动)/fixed（固定，固定在浏览器窗口里面，显示范围为容器；固定之后就相对于浏览器窗口了）
/* background简写以上属性，顺序随便*/
————————————————
版权声明：本文为CSDN博主「橘 日向」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Charlotte_99/article/details/122503382

CSS-1

CSS-1

1-CSS初识

01-CSS定义

02-CSS语法

03-CSS的引入方式

内部样式：

外部样式：

行内样式、内联样式、嵌入式样式

04-CSS样式表的使用场景：

2-CSS选择器

01-选择器的分类

02-基本选择器

1、类型选择器（标签选择器）

2、Class选择器（类选择器）

3、Id选择器

4、通配符

5、群组选择器

CSS权重（特殊性）

03-层次选择器

3-CSS属性

float浮动属性

margin属性

外间距：

margin遇见的问题：

padding属性

4-控制台差错

1、基础性错误导致

2、因为权重导致的

5-css文本相关属性

6-css列表属性

7-css边框属性

8-css背景相关属性

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

CSS-1

CSS-1

1-CSS初识

01-CSS定义

02-CSS语法

03-CSS的引入方式

内部样式：

外部样式：

行内样式、内联样式、嵌入式样式

04-CSS样式表的使用场景：

2-CSS选择器

01-选择器的分类

02-基本选择器

1、类型选择器（标签选择器）

2、Class选择器（类选择器）

3、Id选择器

4、通配符

5、群组选择器

CSS权重（特殊性）

03-层次选择器

3-CSS属性

float浮动属性

margin属性

外间距：

margin遇见的问题：

padding属性

4-控制台差错

1、基础性错误导致

2、因为权重导致的

5-css文本相关属性

6-css列表属性

7-css边框属性

8-css背景相关属性

热门文章

最新文章

相关课程

相关电子书

相关实验场景