CSS的基本使用

目录

• 一、Hello CSS
• 二、CSS语法
• 三、选择器
  • 1、元素选择器
  • 2、id选择器
  • 3、类选择器
  • 4、同时根据元素名和类名来选择
• 四、注释
• 五、CSS文件
• 六、CSS优先级
• 七、CSS基础
  • 1、尺寸
  • 2、背景
  • 3、文本
  • 4、字体
  • 5、鼠标样式
  • 6、表格
  • 7、边框
  • 8、内边距
  • 9、外边距
  • 10、边框模型
  • 11、超链状态
  • 12、隐藏
• 八、CSS布局
  • 1、绝对定位
  • 2、相对定位
  • 3、浮动
  • 4、显示方式
  • 5、水平居中
  • 6、左侧固定
  • 7、垂直居中
  • 8、左右固定
  • 9、贴在下方
  • 10、块之间的空格

一、Hello CSS

1、css是一种分层设计的思想，css把和颜色，大小位置等信息剥离到<style>中，而html只用关心提供什么样的内容就行了。

2、css的语法：selector {property: value} ，即选择器{属性:值}

3、举例场景：给每一个单元格加背景颜色

不使用css：每个元素都要加

<table border="1">
  <tr >
      <td bgcolor="gray" >1</td>
      <td bgcolor="gray">2</td>
  </tr>
  <tr>
      <td  bgcolor="gray">3</td>
      <td  bgcolor="gray">4</td>
  </tr>
  <tr>
      <td  bgcolor="gray">a</td>
      <td  bgcolor="gray">b</td>
  </tr>
</table>

使用css：在最前面写一段css代码

<style>
td{
  background-color:gray;
}
</style>
<table border="1">
  <tr >
      <td>1</td>
      <td>2</td>
  </tr> 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>  
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>  
</table>

二、CSS语法

1、选择所有的p元素，设置文字颜色为红色

<style>
p{
   color:red;
}
</style>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>

2、直接在某一元素上增加style属性

<p style="color:red">这是style为红色的</p>
<p>这是一个没有style的p</p>

三、选择器

选择器主要分3种 ：元素选择器 、id选择器 、类选择器

1、元素选择器

通过标签名选择元素

<style>
p{
  color:red;
}
</style>

<p>p元素</p>
<p>p元素</p>
<p>p元素</p>

2、id选择器

通过id选择元素

注： 一个元素的id应该是唯一的。另一个元素不应该重复使用

<style>
p{
  color:red;
}
#p1{
  color:blue;
}
#p2{
  color:green;
}
</style>

<p>没有id的p</p>
<p id="p1">id=p1的p</p>
<p id="p2">id=p2的p</p>

3、类选择器

当需要多个元素，都使用同样的css的时候，就会使用类选择器

<style>
.pre{
  color:blue;
}
.after{
  color:green;
}
</style>

<p class="pre">前3个</p>
<p class="pre">前3个</p>
<p class="pre">前3个</p>

<p class="after">后3个</p>
<p class="after">后3个</p>
<p class="after">后3个</p>

4、同时根据元素名和类名来选择

<style>
p.blue{
  color:blue;
}
</style>
<p class="blue">class=blue的p</p>
<span class="blue">class=blue的span</span>

四、注释

/**/

五、CSS文件

如果把所有的css都写在html文件里面，一旦样式比较多的时候，就会显得不易维护，这个时候就会选择把所有的css内容，放在一个独立文件里然后在html中引用该文件。通常这个文件会被命名为style.css

1、不使用css文件：样式代码直接写在style标签里

<style>
.p1{
  color:red;
}

.span1{
  color:blue;
}
</style>

<p class="p1">红色</p>

<span class="span1">蓝色</span>

2、使用css文件：

//css文件：style.css
.p1{
  color:red;
}
.span1{
  color:blue;
}
//在html中引用：
<link rel="stylesheet" type="text/css" href="https://how2j.cn/study/style.css" />
<p class="p1">红色</p>
<span class="span1">蓝色</span>
//包含本地css文件：href引用时需要加file
<link rel="stylesheet" type="text/css" href="file://d:/style.css" />
<p class="p1">红色</p>
<span class="span1">蓝色</span>

六、CSS优先级

1、style标签与外部css文件冲突：优先使用最后出现的一个

//css文件
.p1{
  color:red;
}
.span1{
  color:blue;
}

//html文件：
<link rel="stylesheet" type="text/css" href="https://how2j.cn/study/style.css" />
<style>
.p1{
  color:green;
}
</style>
<p class="p1">p1 颜色是绿色，优先使用靠的最后出现的</p>

2、style标签与元素中的style属性冲突：优先使用style属性

<style>
.p1{
  color:green;
}
</style> 
<p class="p1" style="color:red">p1 颜色是红色，优先使用style属性</p>

3、增加了!important：!important优先级最高，甚至高于style属性

<style>
.p1{
  color:green !important;
}
</style>
<p class="p1" style="color:red">p1 颜色是绿色，优先使用!important样式</p>

七、CSS基础

1、尺寸

属性：width
值：可以是百分比或者像素

<style>
p#percentage{
  width:50%;
  height:50%;
  background-color:pink;
}
p#pix{
  width:180px;
  height:50px;
  background-color:green;
}
</style>
<p id="percentage"> 按比例设置尺寸50%宽 50%高</p>
<p id="pix"> 按象素设置尺寸  180px宽 50 px高</p>

2、背景

关键字	简介
background-color	背景颜色
background-image:url(imagepath);	图片做背景
background-repeat	背景重复
background-size: contain	背景平铺

1、背景颜色

<style>
p.gray {background-color: gray;}
h1 {background-color: transparent}
h2 {background-color: rgb(250,0,255)}
h3 {background-color: #00ff00}
</style>

<p class="gray">灰色</p>
<h1>透明背景，默认即透明背景</h1>
<h2>紫色</h2>
<h3>绿色背景</h3>

2、图片做背景

<style>
div#test
  {
    background-image:url(/study/background.jpg);
    width:200px;
    height:100px;
  }
</style>

<div id="test">
  这是一个有背景图的DIV
</div>

3、背景重复

background-repeat属性
值可以选
repeat; 水平垂直方向都重复
repeat-x; 只有水平方向重复
repeat-y; 只有垂直方向重复
no-repeat; 无重复

<style>
div#norepeat
  {
    background-image:url(/study/background_small.jpg);
    width:200px;
    height:100px;
    background-repeat: no-repeat;
  }
div#repeat-x
  {
    background-image:url(/study/background_small.jpg);
    width:200px;
    height:100px;
    background-repeat: repeat-x;
  }
</style>

<div id="norepeat">
  背景不重复
</div>

<div id="repeat-x">
  背景水平重复
</div>

4、背景平铺

属性：background-size
值：contain

<style>
div#contain
  {
    background-image:url(/study/background_small.jpg);
    width:200px;
    height:100px;
    background-size: contain;
  }
</style>

<div id="contain">
   背景平铺，通过拉伸实现，会有失真
</div>

3、文本

color	文字颜色
text-align	对齐
text-decoration	文本修饰
line-height	行间距
letter-spacing	字符间距
word-spacing	单词间距
text-indent	首行缩进
text-transform	大小写
white-space	空白格

4、字体

5、鼠标样式

6、表格

7、边框

8、内边距

9、外边距

10、边框模型

11、超链状态

12、隐藏

八、CSS布局

1、绝对定位

2、相对定位

3、浮动

4、显示方式

5、水平居中

6、左侧固定

7、垂直居中

8、左右固定

9、贴在下方

10、块之间的空格