CSS相关

最新推荐文章于 2022-07-01 15:51:03 发布

niliarmy

最新推荐文章于 2022-07-01 15:51:03 发布

阅读量248

点赞数

本文链接：https://blog.csdn.net/niliarmy/article/details/107577200

版权

一，基础

1.使用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>

2.关于其语法

选择器{属性:值}
（以P为例子）
方法1.直接把所有字改变颜色

  <style>
p{
   color:red;
}
</style>
<p>TAKE MY HANDS UP</p>
<p>YOU ARE THE COURSE OF MY EUPHORIA</p>

方法2.在里面加style

<p style='color:purple'>TAKE MY HANDS UP</p>
<p>YOU ARE THE COURSE OF MY EUPHORIA</p>

3.选择器

选择器主要分3种
①元素选择器

<style>
p{
   color:red;
}
</style>
<p>TAKE MY HANDS UP</p>
<p>YOU ARE THE COURSE OF MY EUPHORIA</p>

②id选择器

<style>
p{
   color:red;
 }
#p1{
   color:green;
      }
#p2{
  color:purple;
       }
</style>
<p>JK</P>
<p id='p1'>TAKE MY HANDS UP</p>
<p id='p2'>YOU ARE THE COURSE OF MY EUPHORIA</p>

③类选择器（pre，after前面那个点不能忘记）

<style>
.pre{
   color:blue;
 }
.after{
   color:green;
      }
</style>
<p class='pre'>JK</P>
<p  class='pre'>TAKE MY HANDS UP</p>
<p  class='pre'>YOU ARE THE COURSE OF MY EUPHORIA</p>

<p class='after'>JK</P>
<p  class='after'>TAKE MY HANDS UP</p>
<p  class='after'>YOU ARE THE COURSE OF MY EUPHORIA</p>

④.更加精准的选择

<style>
p.blue{
   color:blue;
      }
</style>
<p class='blue'>class=blue's p</P>
<span  class='blue'>class=blue's span</span>

4.注释

跟java一样
/*
*/

5.尺寸

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

6.背景相关

①background-color：

预定义的颜色名字
比如red,gray,white,black,pink，参考颜色速查手册
rgb格式
分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
16进制的表示
#00ff00 等同于 rgb(0,255,0)

<style>
p.gray{
 background-color:gray;
}
h1{background:transparent}
h2{background:rgb(250,0,225)}
h3{background:#00ff00}
</style>
<p class='gray'>灰色</p>
<h1>透明背景</h1>
<h2>紫色</h2>
<h3>绿色</h3>

②把图片做背景

#拿其中一个做例子：

```java
<style>
div#test
{
    background-imge:url(pjm.jpg);
    width:100px;
    height:100px;
}
</style>
<div id='test'>
he is pjm,my cute son.
</div>

③背景重复
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 id="norepeat">
  背景不重复
</div>

④平铺背景

<style>
div#contain
{
    background-imge:url(pjm.jpg);
    width:100px;
    height:100px;
    background-size:contain;
}
</style>
<div id="contain">
  背景平铺，拉伸过
</div>

7.文字美化相关

①颜色

<style>
div#color
{
 color:pink;
}
</style>
<div id="color">
  bts
</div>

②关于有边框的一块块
A.会形成那种有边框且字在最左边的效果。

<style>
div#left
{
 text-align:left;
}
</style>
<div id='left'>
bts
</div>

B.字有多少就多长，用align

<style>
div#left{
  text-align:left;
}
/*让div和span的边框显露出来，便于理解本知识点*/
div,span{
  border: 1px gray solid;
  margin:10px;
}

div#right{
  text-align:right;
}

div#center{
  text-align:center;
}

span#right{
  text-align:right;
}

</style>

<div id="left">
左对齐
</div>

<div id="right">
右对齐
</div>

<div id="center">
居中
</div>

<span id="right">
span看不出右对齐效果

</span>

③一些字的效果
选择器{属性：值}
属性：text-decoration
值： overline

<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>knj</h1>
<h2>ksj</h2>
<h3>myg</h3>
<h4>jhs</h4>
<a  href="https://how2j.cn/">linefriends</a>
/*href不要写错成herf*/
<a  class='a'  href='https://how2j.cn/'>out</a>

④行间距

<style>
p{
 width:200px;
}
.p{
line-height:200%;
}
</style>
<p>
DNA
Fake Love
Boy meet evil
blood tear sweat
</p>

<p class='p'>
Idol
ON
Wings
Mic Drop
mono
August D
Forever rain
</p>

⑤字符间距

<style>
p{
 width:200px;
}
.p{
letter-spacing:2;
}
</style>
<p>
abcdefg abcdefg abcdefg abcdefg
</p>

<p class='p'>
abcdefg abcdefg abcdefg abcdefg
</p>

⑥单词间距

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

<p class='p'>
abcdefg abcdefg abcdefg abcdefg
</p>

⑦首行缩进

<style>
p{
 width:200px;
}
.p{
text-indent:50;
}
</style>
<p>
abcdefg abcdefg abcdefg abcdefg
</p>

<p class='p'>
abcdefg abcdefg abcdefg abcdefg
</p>

⑧大小写之类

<style>
/*大写*/
p.b{
 text-transform:uppercase;
}
/*小写*/
p.t{
text-transform:lowercase;
}
/*首字母大写*/
p.s{
text-transform:capitalize;
}
</style>
<p class='b'>
abcdefg 
</p>

<p class='t'>
abcdefg 
</p>
<p class='s'>

abcdgefg

</p>

⑨关于空白格

<style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
p.n{
 white-space:normal}
p.p{
white-space:pre}
}
p.pw{
white-space:pre-wrap
}
p.nw
{
white-space:nowrap}
</style>
<p class='n'>
在默认情况下，多个     空白格或者
换行符

    会被     合并成一个空白格 
</p>

<p class="p">
保留所有的    空白格
以及换行符 
相当于pre元素
特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</p>

<p class="pw">
保留所有的    空白格
以及换行符 
相当于pre元素
特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</p>

<p class="nw">
不会换行
不会换行
不会换行
不会换行
不会换行
不会换行
直到br<br/>才换行
</p>

8.文字大小等

①大小

<style>
p.b{
    font-size:70px;
       }
p.s1{
   font-size:50%;}
p.s2{
font-size:0.5em;}
</style>

<p>normal</p>
<p class='b'>30px's</p>
<p class-'s1'>50%bili</p>
<p class='s2'>0.5em</p>

#②斜体#

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

<p>normal</p>
<p class='n'>normal's</p>
<p class='i'>xieti</p>

③#粗体#

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

<p>normal</p>
<p class='n'>normal's</p>
<p class='b'>cu</p>

④字库里用字体

<style>
p.n{
    font-family:times new roman;
       }
p.b{
   font-family:arial;}
</style>

<p>normal</p>
<p class='n'>ziku's times new roman</p>
<p class='b'>ziku's</p>

综合使用

<style>
p.all{
   font:italic bold 30px "Times New Roman";
}
 
</style>
 
<p>默认字体</p>
 
<p class="all">斜体的 粗体的 大小是30px的 "Times New Roman" </p>
双击选中所有代码
试一下

9.鼠标样式

十字架式

<style>
    span{
             cursor:crosshair;
              }
</style>
<span>shizijia</span>

10.表格

关于表格的宽度
属性:table-layout
automatic; 单元格的大小由td的内容宽度决定
fixed; 单元格的大小由td上设置的宽度决定
（属性：值）
但是中文不行

<style>
    table.t1{
             table-layout:automic;
              }
     table.t2{
              table-layout:fixed;
        }
</style>
<table class='t1' border='1' width='100%'>
<tr>
<td width='10%'>abcdefghijk,mnopqrstuvwxyz</td>
<td width='90%'>abc</td>
</tr>
</table>
<table class='t2' border='1' width='100%'>
<tr>
<td width='50px'>abcdefghijk,mnopqrstuvwxyz</td>
<td >abc</td>
</tr>
</table>

11.边框

①虚实线
属性： border-style
solid: 实线
dotted:点状
dashed:虚线
double:双线
②颜色
属性：border-color
值：red,#ff0000,rgb(255,0,0)
③宽度
属性：border-width
值：数字
（多个一起用）

<style>
.red{
       border-style:solid;
       border-color:purple;
        border-width:1px;
      }
.default
{
border-style:solid;
       border-color:purple;
}
</style>
<div>no</div>
<div class='red'>purple you</div>
<div class='default'>no width</div>

12.内边距

①单边距

<style>
.red{
       border:5px solid red;
       background-color:green;
      }
.ped-left
{
        border:5px solid red;
       background-color:green;
       padding-left:50px;
}
</style>
<div>no</div>
<div class='red'>purple you</div>
<div class='ped-left'>purple you</div>

②四边内边距

<style>
.pad-left{
       border:5px solid red;
       background-color:green;
       padding:20;
      }
.ped-left-four
{
        border:5px solid red;
       background-color:green;
       padding:110 20 30 40;
}
</style>
<div>no</div>
<div class='pad-left'>purple you</div>
<div class='ped-left-four'>purple you</div>

一些奇奇怪怪的规矩
如果缺少左内边距的值，则使用右内边距的值。
如果缺少下内边距的值，则使用上内边距的值。
如果缺少右内边距的值，则使用上内边距的值。
@[TOC]13.外边距
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距

<style>
.red{
       border:5px solid red;
       background-color:green;
      }
.margin
{
        border:1px solid red;
       background-color:green;
       margin-left:10px;
}
</style>
<div class='red'>purple you</div>
<div class='red'>purple you</div>
<br>
<div class='red'>purple you</div>
<div class='margin'>purple you</div>

13边框模型

<style>
.box{
       width:70px;
       padding:5px;
       margin:10px;
      }
div
{
         border:1px solid red;
         font-size:70%;
}
</style>
<div >welcome</div>
<div class='box'>
  army<br><br>
  purple <br<br>
  bts<br><br>
   </div>
<div> bye</div>

14.超链接

超链状态有4种
link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候

<style>
a:link{color:#ff0000}
a:cisiter{color:#00ff00}
a:hover{color:#ffff00}
a:active{color:#ff00ff}
</style>

<a href:"http://www.12306.com">different</a>

这样可以去除超链接下划线

<style>
a.no_underline {text-decoration: none}
</style>
   
<a href="http://www.12306.com">默认的超链</a>
<br>
<a class="no_underline" href="http://www.12306.com">去除了下划线的超链</a>

15.隐藏

使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了
使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见”

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

<div>can see div1</div>
<div class='d'>hidden div2,use display none</div>
<div >can see div3</div>
<div class='v'>hidden div4, visibility:hidden</div>
<div>can see div5</div>

效果如下

16.把css部分挑出来

独立一个css后缀文件

.p1{
  color:red;
}
.span1{
  color:blue;
}

在HTML文件里写

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

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

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

17.优先级问题

①外部css文件与内部style元素
style优先出现
②style元素与内部的p里的color：green这样
后者优先
③在style里颜色之后加上！important即可使其在提前了

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

二，布局

1绝对定位

这样子，position：absolute
并且在后面写位置

下面一来，bts army会凑在一起，and自己挪开

<style>
p.abs{
       position:absolute;
       left:150px;
       top:150px;
        }
</style>
<p>bts</p>
<p class='abs'>and</p>
<p>army</p>
<p>forever</p>

2.这是有了div作为定位的绝对位置

div就是绝对了的

<style>
p.abs{
       position:absolute;
       left:150px;
       top:150px;
        }
.absdiv{
        position:absolute;
        left:150px;
        top:50px;
        width:2115px;
        border:1px solid pink;
   }        
</style>
<p>bts</p>
<p class='abs'>and</p>
<p>army</p>
<p>forever</p>


<div  class='absdiv'>
没定位的div
<p class='abs'>绝对定位的文字</p>
</div>

没有了绝对定位则是不一样的位置
（少了p.abs）
③关于那个覆盖在哪一个上面
就是z-index大的在上面

<style>
img#i1{
  position: absolute;
  left: 60px;
  top: 20px;
  z-index:1;
}
  
  img#i2{
  position: absolute;
  left: 60px;
  top: 120px;
  z-index:-1;
}
 
</style>
 
<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
<p >正常文字e</p>
<p >正常文字f</p>
<p >正常文字g</p>
</div>

<img id="i1" src="https://how2j.cn/example.gif" />
<img id="i2" src="https://how2j.cn/example.gif" />

3.相对位置

跟绝对位置比起来就是不占位置


```java
<style>
p.r{
position:relative;
left:150px;
top:50px;
}
</style>
<p>bts</p>
<p class='r'>and</p>
<p>army</p>
<p>forever</p>

为了使相对定位下仍然能够不占坑
则可以使用绝对定位一起使用

<style>
div.r{
  position: relative;
  left: 0;
  top: 0;
}
  
  div.a{
      position: absolute;
  left: 150px;
  top: 0px;
  }
 
</style>
 
<p>正常文字1</p>
<p>正常文字2</p>
<div class="r">
<div class="a">相对定位的文字3(不占坑)</div>
</div>
<p>正常文字4</p>
<p>正常文字5</p>

4浮动起来

文字的浮动：其实就是让出位置

<style>
.f{
float:right;
}
</style>
 
<div>正常文字1</div>
<div>正常文字2</div>
<div class="f">浮动文字</div>
<div>正常文字4</div>
<div>正常文字5</div>

改成left可以理解为没法继续向左移动，只剩下继续占坑。
图片的浮动：
用left即可环绕

<style>
.f{
  float:left;
}

div{
  width:320px;
}
</style>
<div >
 <img  class="f" src="https://how2j.cn/example.gif"/>

```java

```java
<p>  当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
</p>
</div>

不围绕

<style>
.f{
  float:left;
}

div{
  width:320px;
}

.clearp{
  clear:left;
}

</style>

<div >
 <img  class="f" src="https://how2j.cn/example.gif"/>

<p>  当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
 当图片浮动时，文字围绕着图片
</p>
</div>


<div >
 <img  class="f" src="https://how2j.cn/example.gif"/>

<p class="clearp">  当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片

</p>
</div>

默认的div排列是会换行的
如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
如果超出了父容器，还会有自动换行的效果

<style>
div#floatingDiv{
  width:200px;
}
div#floatingDiv div{
   float:left;
}
</style>
默认的div排列是会换行的

 <div>
       菜单1
 </div>
 <div>
       菜单2
 </div> 
 <div>
       菜单3
 </div>

如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方

如果超出了父容器，还会有自动换行的效果

<div id="floatingDiv">
  <div>
       菜单1
 </div>
 <div>
       菜单2
 </div> 
 <div>
       菜单3
 </div>
 <div>
       菜单4
 </div>
 <div>
       菜单5
 </div>
 <div>
       菜单6
 </div>
</div>

5.把span弄成块（div），即可显示出其块的属性；

块级的改成span，则用内联。里面的display：block改为display：inline
若要同一行且能控制大小，即用block-inline

  <style>
div,span{
   border: 1px solid lightgray;
   margin:10px;
   width:200px;
   height:100px;
}
 
.d{
  display:block;
}
</style>
  
<div>普通的div块</div>
<span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span>
<span class="d">这是span,被改造成了块级元素</span>

6居中

①内容居中

<style>
div{
  border:1px solid lightgray;
  margin:10px;
}
</style>
<div align="center">
通过设置属性align="center" 居中的内容
</div>
 
<div  style="text-align:center">
通过样式style="text-align:center" 居中的内容
</div>

②元素居中
style=“width:300px;margin:0 auto”
相关div内换成这个
4.左对齐且填满右半部分

<style>
 .left{
   width:200px;
   float:left;
   background-color:pink
  }
.right{
    overflow:hidden;
    background-color:lightskyblue;
  }
</style>
<div class="left">左边固定宽度</div>
<div class="right">右边自动填满</div>

7垂直居中

直接文字居中
style里
d {
line-height: 100px;
}
<div id=“d”>line-height 适合单独一行垂直居中</div**>**
内边距设置好剩下文字居中
#d {
padding: 30 0;
}
图片居中
因为line-height不可以起作用于图片

<style>
#d {
display: table-cell;
vertical-align: middle;
height:200px;
}
 
div{
  border:solid 1px lightskyblue;
}
</style>
  
<div id="d">
<img src="https://how2j.cn/example.gif">
</div>

8左右固定

跟左固定相关

<style>
 .left{
   width:200px;
   float:left;
   background-color:pink
  }
  .right{
   width:200px;
   float:right;
   background-color:pink
  }
  .center {margin:0 200px;   background-color:lightblue}
</style>

9.贴着底部

<style> 
#div1
        {
            position: relative;
            height: 300px;
            width: 90%;
            background-color: skyblue;
        }
        #div2
        {
            position: absolute;
            bottom: 0;
            height: 30px;
            width: 100%;
            background-color: lightgreen;
        }
    </style>

<div id="div1">
	<div id="div2"> 无论蓝色div高度如何变化，绿色div都会贴在下面
	</div>
</div>

@[TOC]8.css的块之间应该直接按空格就可以有空格但是实现不了换行。
解决方案

<style>
div.nocontinue span{
border-bottom:2px solid lightgray;
  float:left;
}
</style>
  
<div class="nocontinue">
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
</div>
 
<div style="clear:both"></div>
 
<div>后续的内容</div>
双击选中所有代码
试一下

niliarmy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS相关

1.使用CSS给表格的背景加颜色<style>td{ background-color:gray;}</style><table border="1"> <tr > <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</t
复制链接

扫一扫