CSS

最新推荐文章于 2024-10-16 16:53:30 发布

chenenxiong

最新推荐文章于 2024-10-16 16:53:30 发布

阅读量106

点赞数

分类专栏：前端部分文章标签： css

本文链接：https://blog.csdn.net/chenenxiong/article/details/103831125

版权

前端部分专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、教程

不使用css 给每一个单元格加上背景颜色，就需要给每一个td元素加上bgcolor属性，

使用css 给每一个单元格加上背景颜色，只需要在最前面写一段css代码，所有的单元格都有背景颜色了

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

二、语法

selector {property: value}，即选择器{属性:值}

学习css即学习有哪些选择器，哪些属性以及可以使用什么样的值

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

直接在元素属性加上style属性

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

三、选择器

主要分3种：

1、元素选择器

元素选择器通过标签名选择元素

在实例中，所有的p都被设置成红色

<style>
p{
  color:red;
}
</style>
 
<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、精确选择

同时根据元素名和class来选择：p.blue

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

四、注释

以/* 开始，以*/结束

五、尺寸

属性：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>

六、背景

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、背景重复

<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>

七、文本

1、文字颜色、属性名color

<style>
div#colorful{
  color:pink
}
 
</style>
 
<div id="colorful">
  粉红色
</div>

2、对齐

<style>
div#left{
  text-align:left;
}
/*让div和span的边框显露出来，
设置边框粗细及间隔*/
div,span{
  border: 0px gray solid;
  margin:30px;
}
</style>
 
<div id="left">
左对齐
</div>

3、文本修饰

属性：text-decoration

值： overline、line-through、underline、blink、none

<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
.a {text-decoration: none}
</style>
 
<h1>上划线</h1>
<h2>删除效果</h2>
<h3>下划线</h3>
<h4>闪烁效果，大部分浏览器已经取消该效果</h4>
<a href="https://how2j.cn/">默认的超链</a>
<a class="a" href="https://how2j.cn/">去掉了下划线的超链</a>

4、行间距

属性：line-height

值：数字或者百分比

<style>
p{
  width:200px;
}
 
.p{
  line-height:200%;
}
</style>

5、单词间距

属性：word-spacing

值：数字

<style>
p{
  width:200px;
}
 
.p{
  word-spacing:10;
}
</style>
 
<p>
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
 
<p class="p">
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>

6、首行缩进

<style> 
.p{
  text-indent:50;
}
</style>

7、大小写

属性：text-transform

值：

uppercase 全部大写

capitalize 首字母大写

lowercase 全部小写

<style>
p.u {text-transform:uppercase}
p.c {text-transform:capitalize}
p.l {text-transform:lowercase}
 
</style>

8、空白格

属性：white-space

值：

normal 默认。多个空白格或者换行符会被合并成一个空白格

pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。

pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。

nowrap 一直不换行，直到使用br

<style>
p.n {white-space:normal}
p.p {white-space:pre}
p.pw {white-space:pre-wrap}
p.nw {white-space:nowrap}
 
</style>

八、字体

1、尺寸

属性：font-size

值：数字或者百分比

<style>
p.big{
  font-size:30px;
}
 
p.small{
  font-size:50%;
}
   
p.small2{
  font-size:0.5em;
} 
</style>

2、风格

ont-style:

normal 标准字体

italic 斜体

<style>
p.n{
  font-style:normal;
}
 
p.i{
  font-style:italic;
}
</style>

3、粗细

属性 font-weight

normal 标准粗细

bold 粗一点

<style>
p.n{
  font-weight:normal;
}
p.b{
  font-weight:bold;
}

4、声明一起

<style>
p.all{
   font:italic bold 30px "Times New Roman";
}
</style>
<p class="all">斜体的 粗体的 大小是30px的 "Times New Roman" </p>

九、鼠标样式

<style>
  span{
    cursor:crosshair;
  }
</style>
  
<span>鼠标移动到这段文字上，就看到鼠标样式变成了十字架</span>

十、表格布局

1 布局

属性:table-layout

automatic; 单元格的大小由td的内容宽度决定

fixed; 单元格的大小由td上设置的宽度决定

注：只对连续的英文字母起作用，如果使用中文就看不到效果

2 边框合并

<style>
table.t1{
  border-collapse:separate;
}
table.t2{
   border-collapse:collapse;
}
</style>

十一、边框

1 边框风格

属性： border-style

solid: 实线

dotted:点状

dashed:虚线

double:双线

<style>
.solid{
   border-style:solid;
}
.dotted{
   border-style:dotted;
}
.dashed{
   border-style:dashed;
}
.double{
   border-style:double;
}
 
</style>
 
<div> 默认无边框div </div>
 
<div class="solid"> 实线边框  </div><br/>

2 边框颜色

<style>
.red{
   border-style:solid;
   border-color:red;
}
 
</style>
 
<div> 默认无边框div </div>
 
<div class="red"> 实线红色边框  </div><br/>

3、放一起

<style>
.red{
   border:1px dotted LightSkyBlue;
}
 
</style>
 
<div> 默认无边框div </div>
 
<div class="red"> 点状天蓝色细边框  </div><br/>

4、边框方向

border-top-style:solid;
border-top-color:red;
border-top-width: 50px;

5、边框交界颜色

<style>
 div.lefttop{
   width:150px;
   height:150px;
   border-top-style:solid;
   border-top-color:red;
   border-top-width: 50px;
   border-left-style:solid;
   border-left-color:blue;
   border-left-width: 50px;  
   background-color:lightgray;  
  }
   
  div.alldirection{
   width:150px;
   height:150px;
   border-top-style:solid;
   border-top-color:red;
   border-top-width: 50px;
   border-left-style:solid;
   border-left-color:blue;
   border-left-width: 50px;  
   border-bottom-style:solid;
   border-bottom-color:green;
   border-bottom-width: 50px;
   border-right-style:solid;
   border-right-color:yellow;
   border-right-width: 50px;     
   background-color:lightgray;  
  }
</style>
  
<div class="lefttop">
左边和上边都有边框
</div>
<br>
<div class="alldirection">
四边都有边框　
</div>

6、块级元素、内联元素边框区别

可以看到，块级元素div默认是占用100%的宽度

常见的块级元素有div h1 p 等

而内联元素span的宽度由其内容的宽度决定

常见的内联元素有 a b strong i input 等

十二、超链接状态

伪类，所谓的伪类即被选中的元素处于某种状态的时候

超链状态有4种

link - 初始状态，从未被访问过

visited - 已访问过

hover - 鼠标悬停于超链的上方

active - 鼠标左键点击下去，但是尚未弹起的时候

十三、隐藏

使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了

使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见”

<style>
div.d{
  display:none;
}
 
div.v{
  visibility:hidden;
}
</style>

十四、css文件

html文件中，包含css文件

<link rel="stylesheet" type="text/css" href="/study/style.css" />

十五、优先级

1、外部文件与style标签重复，优先使用最后出现的

2、sytle标签与style属性重复，优先使用style属性

chenenxiong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录