一、概念

Cascading Style Sheets 层叠样式表。

层叠:多个样式可以作用在同一个html的元素上,同时生效

二、好处

1)、功能强大

2)、将内容展示和样式控制分离

  降低耦合度。解耦

  让分工协作更容易

  提高开发效率

三、CSS与html结合方式

1、内联样式

在标签内使用style属性指定css代码

<div style="color:red;">hello css</div>

2、内部样式

在head标签内,定义style标签,style标签的标签体内容就是css代码

<style>
    div{
        color:blue;
    }

</style>
<div>hello css</div>

3、外部样式

1)、定义css资源文件

2)、在head标签内,定义link标签,引入外部的资源文件

a.css文件:

div{
    color:green;
}

引入到的文件

<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>

还可以写为:

<style>
   @import "css/a.css";
</style>

四、css语法

格式

选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
    ...
}

选择器:筛选具有相似特征的元素

注意:每一对属性需要使用;隔开,最后一对属性可以不加;

五、选择器的分类

1、基础选择器

1)、id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一

语法:#id属性值{}

2)、元素选择器:选择具有相同标签名称的元素

语法: 标签名称{}

注意:id选择器优先级高于元素选择器

3)、类选择器:选择具有相同的class属性值的元素。

语法:.class属性值{}

注意:类选择器选择器优先级高于元素选择器

2、扩展选择器

1)、选择所有元素:

语法: *{}

2)、并集选择器:

语法:选择器1,选择器2{}

<style>
div,input{
  border:4px solid;
}
</style>
<div>aaa</div>
<input type="text" >

3)、子选择器:筛选选择器1元素下的选择器2元素

语法: 选择器1 选择器2{}

<style>
div p{
    color:red;
}
</style>
<div>
   <p>传智播客1</p>
   <p>传智播客2</p>
   <p>传智播客3</p>
</div>
<p>黑马程序员</p>

4)、父选择器:筛选选择器2的父元素选择器1

语法: 选择器1 > 选择器2{}

代码演示:只会找第一个h1下的strong标签

<style>
h1>strong{
  color:red;
}
</style>
<h1>这是 <strong>非常</strong> <strong>非常</strong>重要的内容</h1>
<h1>这是<em>真的 <strong>非常</strong></em> 重要的内容</h1>

5)、属性选择器:选择元素名称,属性名=属性值的元素

语法: 元素名称[属性名="属性值"]{}

<style>
input[type='text']{
   border: 5px solid;
}
</style>
<input type="text" >
<input type="password" >

6)、伪类选择器:选择一些元素具有的状态

语法: 元素:状态{}

如: <a>

状态:link:初始化的状态,visited:被访问过的状态,active:正在访问状态,hover:鼠标悬浮状态。

<style>
/*初始化,选择所有未访问链接*/
a:link{
   color: pink;
}
/*选择所有访问过的链接*/
a:visited{
   color: red;
}
/*选择活动链接*/
a:active{
  color: yellow;
}
/*选择鼠标在链接上面时*/
a:hover{
   color: green;
}
</style>    
<a href="#">黑马程序员1</a>
<a href="#">黑马程序员2</a>

六、属性

1、盒子模型:控制布局

margin:外边距

padding:内边距

默认情况下内边距会影响整个盒子的大小。解决办法:box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小

.div2{
      width: 200px;
      height: 200px;
      padding: 50px;/*内边距*/
      /*
       设置盒子的属性,让width和height就是最终盒子的大小
      */
      box-sizing: border-box;
   }

注意:当设置了padding时,一定要设置box-sizing:border-box;

例子:

(1)、当没有设置padding时

<div id="div1" style="height:100px;width:300px;margin:3px;border:1px solid blue;background-color:lightblue;box-sizing: border-box;"></div>

此时没有加padding,div元素的尺寸如下:

注意:border的厚度会影响div的宽度和高度,即宽度和高度要扣除border的厚度。

(2)、当设置了padding时

<div id="div1" style="height:100px;width:300px;margin:3px;padding:10px;border:1px solid blue;background-color:lightblue;box-sizing: border-box;"></div>

此时设置了padding为10px;

注意:padding会影响div的宽度和高度。

 

posted on 2021-12-28 10:45  周文豪  阅读(39)  评论(0编辑  收藏  举报