CSS学习笔记（三）布局背景字体文本边框列表复杂样式一一相关属性

最新推荐文章于 2024-07-25 10:15:00 发布

慕林溪

最新推荐文章于 2024-07-25 10:15:00 发布

阅读量1.3k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/SGZ_06_666666/article/details/51202638

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS布局属性相关：

外边距:

margin：a px b px c px d px；上右下左

margin：a px；上下左右四个方向外边距都是a px

margin：a px b px；上下外边距是a，左右外边距是b

margin： 0px auto；上下外边距是0，左右外边距是自动

margin-left：a px；左边距是a

margin-right：b px；右边距是b

margin-top：c px；上边距是c

margin-bottom：d px；下边距是d

内边距：

padding：a px b px c px d px；
padding：a px；
padding：a px b px；
......

margin: 0px auto的例子：

<html>  
  <head>  
    <style>  
      div{background-image:url('https://img-my.csdn.net/uploads/201604/26/1461631727_2209.jpg');
          width:500px;height:312px;margin:0px auto;}  
    </style>  
  </head>  
<body>  
<div></div>
</body>  
</html> <strong> </strong>

图片上下外边距为0px，左右居中：

CSS 背景相关属性效果：

background-color 设置背景颜色

background-image 设置背景图片

（eg: red|#ffffff|rgb(255,255,255)）

background-repeat 设置背景图像是否及如何重复。

background-attachment 背景图像是否固定或者随着页面的其余部分滚动。

（scroll：背景图片随元素移动。

fixed：背景图片不会随元素滚动而移动。）

background-position 设置背景图片的起始位置。（默认原点在左上角）

设置背景颜色小栗子：

<html>
  <head>
    <style>
      body{background-color:#60a21a}
    </style>
  </head>
  <body>
    <h3>我是标题，啊哈哈</h3>
      <p>你好，我是段落。在这样一个阴雨绵绵的日子里，我仅代表段落向标题say hello~</p>
  </body>
</html>

设置背景图片小栗子：

<html>
  <head>
    <style>
      body{background-image:url('https://img-my.csdn.net/uploads/201603/29/1459237409_6607.jpg')}
    </style>
  </head>
  <body>
    <h3>我是标题</h3>
    <p>我是段落</p>
  </body>
</html>

background-repeat：设置一个指定的背景图像是否或如何铺排

background	简写属性，作用是将要设置的背景属性设置在一个声明中。

属性值	作用
repeat	背景图像将在垂直方向和水平方向平铺。(默认值)
repeat-x	背景图像将在水平方向平铺。
repeat-y	背景图像将在垂直方向平铺。
no-repeat	背景图像不平铺。
inherit	规定应该从父元素继承 background-repeat 属性的设置

小栗子：

<html>
  <head>
    <style>
      body{background-image:url('https://img-my.csdn.net/uploads/201604/26/1461631727_2209.jpg') ; background-repeat:repeat-x}
    </style>
  </head>
  <body>
    <h3>试试几种不同的repeat值：<b>repeat-x</b></h3>
    <p>整个body背景图片是以<b><span style="color:blue">水平</span></b>方向进行平铺</p>
  </body>
</html>

<html>
  <head>
    <style>
      body{background-image:url('https://img-my.csdn.net/uploads/201604/26/1461631727_2209.jpg') ; background-repeat:repeat-y}
    </style>
  </head>
  <body>
    <h3>试试几种不同的repeat值：<b>repeat-y</b></h3>
    <p>整个body背景图片是以<b><span style="color:blue">垂直</span></b>方向进行平铺</p>
  </body>
</html>

背景相关简写方式：

<html>
  <head>
    <style>
      body{background:url('https://img-my.csdn.net/uploads/201604/26/1461631727_2209.jpg') no-repeat left top;}
    </style>
  </head>
  <body>
    <h3>试试几种不同的repeat值：<b>repeat-y</b></h3>
    <p>整个body背景图片是以<b><span style="color:blue">垂直</span></b>方向进行平铺</p>
  </body>
</html>

background-position：5个关键字：lef、tright、 top、bottom 以及center。关键字中的任意两个组合都可以作为该属性的值。

三种方式设定位置：

1.使用关键字设定位置。eg：background-position:center center;

2.使用百分比设定位置。eg：background-position:50% 50%;

3.使用绝对或相对单位的数值。eg：background-position:0px 0px

设置图片起始位置小栗子：

起始位置（0 0）：

<html>
  <head>
    <style>
      body{background-image:url('https://img-my.csdn.net/uploads/201604/26/1461631727_2209.jpg');background-repeat:no-repeat;background-position:0px 0px}
    </style>
  </head>
<body>
<h3>测试background-position</h3>
</body>
</html>

起始位置（-215 -112）

<html>
  <head>
    <style>
      body{background-image:url('https://img-my.csdn.net/uploads/201604/26/1461631727_2209.jpg');background-repeat:no-repeat;background-position:-215px -112px}
    </style>
  </head>
<body>
<h3>测试background-position</h3>
</body>
</html>

ps：先通过画图工具找到需要截取的图片的起始位置像素点坐标

再在前面添加负号（-）即：-215 -112

CSS字体属性：font

font-size 字体大小

eg：font-size: a px / a em（默认字体大小的a倍）

font-family 字体 eg：font-family : 微软雅黑;

font-weight 字体磅值(粗细) 100~900

常量值：lighter|normal|bold|bolder

font-style 字体样式 normal|italic

CSS文本属性：

color：文本颜色

text-align：文本对齐方式 left|center|right

line-height：行高

text-decoration：文本装饰

none|underline|overline|line-throught

line-height 与 height 区别

<html>
  <head>
  <style>
	#d1{background:red;width:200px;height:80px;float:left}
	#d2{background:blue;width:200px;line-height:80px;float:left}
	#d3{background:orange;width:200px;height:80px;line-height:80px;float:left}
  </style>
  </head>
  <body>
    <div id="d1">文字文字文字字字字字...</br>文字文字文字字字字字...</div>
    <div id="d2">文字文字文字字字字字...</br>文字文字文字字字字字...</div>
    <div id="d3">文字文字文字字字字字...</br>文字文字文字字字字字...</div>
  </body>
</html>

CSS边框属性：border

border：eg：border: 1px solid red;

eg：border-left|right|top|bottom: 1px solid red

分别设置：

border-width： eg：border-width: 1px;

border-left-width|border-right-width

border-top-width|border-bottom-width

border-style： eg：border-style: solid;

border-left-style|......

border-color： eg：border-color: red;

border-left-color|......

CSS列表属性：（ul li）

list-style:none

CSS复杂样式属性：

display：控制组件的显示与隐藏。

display: block; 显示

display: none; 隐藏

如果把一个组件的display属性设置为block，

那么浏览器将会把其当作块级标记进行显示。

块级标签：<ul> <li> <p> <div> <h1>~<h6>...... 单独占一行

行级标签：<s> <a> <i> <input> <u>......

只有块级标签才可以设置width与height。

没使用display: block的行级标签：

<html>
<head>
  <style>
    a{border:2px solid red; width:100px; height:100px;}
  </style>

</head>
<body>
  <a href="http://baidu.com" target="_blank">百度</a>
</body>
</html>

使用display: block的行级标签：

<html>
<head>
  <style>
    a{border:2px solid red; width:100px; height:100px;display:block;}
  </style>

</head>
<body>
  <a href="http://baidu.com" target="_blank">百度</a>
</body>
</html>

float：浮动 left|right （可使块级标签横向排列）

没使用float：

<html>
<head>
  <style>
    #d1{width:120px;height:120px;background-color:red;}
    #d2{width:120px;height:120px;background-color:green;}
    #d3{width:120px;height:120px;background-color:blue;}
  </style>

</head>
<body>
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
</body>
</html>

使用float：（使块级标签横向排列）

<html>
<head>
  <style>
    #d1{width:120px;height:120px;background-color:red;float:left}
    #d2{width:120px;height:120px;background-color:green;float:left}
    #d3{width:120px;height:120px;background-color:blue;float:left}
  </style>

</head>
<body>
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
</body>
</html>