看程序学css-1

最新推荐文章于 2024-05-23 22:54:35 发布
涂家豪
最新推荐文章于 2024-05-23 22:54:35 发布
阅读量91
点赞数
分类专栏： css
本文链接：https://blog.csdn.net/tujiahao1/article/details/91346680
版权
css 专栏收录该内容
4 篇文章 0 订阅
订阅专栏
1、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
<!--元素的背景色、前景色设置-->
  td{
    background-color:gray;
  }
  p{
    color:red;
  }
</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>

<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>
<p style="color:blue">这是style为红色的</p>
<p>这是一个没有style的p</p>
</body>
</html>

2、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
/*元素选择器*/
<style>
  /*设置所有的p元素中的内容为红色*/
  p{
    color:red;
  }
</style>

<p>p元素</p>
<p>p元素</p>
<p>p元素</p>
<style>
  /*id选择器*/
  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>
<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>
<style>
  /*元素+类 选择器*/
  p.blue{
    color:blue;
  }

</style>

<p class="blue">class=blue的p</p>

<span class="blue">class=blue的span</span>
</body>
</html>

3、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
<!--元素+id-->
  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>

</body>
</html>

4、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>

<style>
<!--div的背景图像-->
  div#test
  {
    background-image:url(background.jpg);
    width:200px;
    height:100px;
  }
</style>

<div id="test">
  这是一个有背景图的DIV
</div>
<style>
  div#norepeat
  {
    background-image:url(background_small.jpg);
    width:200px;
    height:100px;
    background-repeat: no-repeat;	//是否重复的设置
  }

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

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

<div id="repeat-x">
  背景水平重复
</div>
<style>
  div#contain
  {
    background-image:url(background_small.jpg);
    width:200px;
    height:100px;
    background-size: contain;	//背景图像显示尺寸
  }
</style>

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

</body>
</html>
5、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
  div#colorful{
    color:pink
  }

</style>

<div id="colorful">
  粉红色
</div>
<style>
  div#left{
    text-align:left;		//div文字对齐
  }
  /*让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>
<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="http://how2j.cn/">默认的超链</a>
<a class="a" href="http://how2j.cn/">去掉了下划线的超链</a>
<style>
  p{
    width:200px;
  }

  .p{
    line-height:200%;	//行间距
  }
</style>

<p>
  默认行间距
  默认行间距
  默认行间距
  默认行间距
  默认行间距
  默认行间距
  默认行间距
  默认行间距
  默认行间距
  默认行间距
  默认行间距
  默认行间距
  默认行间距
</p>

<p class="p">
  200%行间距
  200%行间距
  200%行间距
  200%行间距
  200%行间距
  200%行间距
  200%行间距
  200%行间距
  200%行间距
  200%行间距
  200%行间距
</p>
<style>
  p{
    width:200px;
  }

  .p{
    letter-spacing:4;	//字符间距
  }
</style>

<p>
  abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>

<p class="p">
  abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
<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>
<style>
  p{
    width:200px;
  }

  .p{
    text-indent:50;		//段落缩进
  }
</style>

<p>
  没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字
</p>

<p class="p">
  有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段

  文字
</p>
<style>
  p.u {text-transform:uppercase}		//大小写装换
  p.c {text-transform:capitalize}
  p.l {text-transform:lowercase}

</style>

<p class="u">
  abcD
</p>

<p class="c">
  abcD
</p>

<p class="l">
  abcD
</p>
<style>
<!--是否预格式显示-->
  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>

</body>
</html>