前端学习-CSS篇(一)最近打算重新系统的学习一下css,之前学的有点乱。对css的理解还是不够深刻,导致写样式表的时候出现很多问题。不过一些很基础的这里就忽略了,只记录一些平时用的比较多知识点。

line-height:行间距

这个较为简单,就是行与行之间的间距。一般比当前字体大7-8px即可。

text-align:文本对齐方式

取值:

  1. left:把文本排列到左边。默认值:由浏览器决定。
  2. right:把文本排列到右边。
  3. center:把文本排列到中间。
  4. justify:实现两端对齐文本效果。
  5. inherit:规定应该从父元素继承 text-align 属性的值。

text-indent:首行缩进

text-indent 属性规定文本块中首行文本的缩进。 注释 允许使用负值。如果使用负值,那么首行会被缩进到左边。 单位建议使用em

代码示例

<p style="text-indent:2em;font-size:15px">首行缩进为2em</p>

实现效果

首行缩进为2em

letter-spacing:字间距(中文)

代码示例

<p style="word-spacing:2px">Hello World!(word-spacing:2px)</p>
<p style="word-spacing:8px">Hello World!(word-spacing:8px)</p>

实现效果

这是一个例子(letter-spacing:2px)

这是一个例子(letter-spacing:4px)

word-spacing:词间距(英文)

代码示例

<p style="word-spacing:2px">Hello World!(word-spacing:2px)</p>
<p style="word-spacing:8px">Hello World!(word-spacing:8px)</p>

实现效果

Hello World!(word-spacing:2px)

Hello World!(word-spacing:8px)

颜色的半透明:rgba()

代码示例

<p style="color:rgba(0,0,0,0.2)">这是一个例子(rgba(0,0,0,0.2)</p>

实现效果

这是一个例子(rgba(0,0,0,0.2)

text-shadow:文字阴影

语法

text-shadow: h-shadow v-shadow blur color;

可选属性

  1. h-shadow必需。水平阴影的位置。允许负值。
  2. v-shadow必需。垂直阴影的位置。允许负值。
  3. blur可选。模糊的距离。
  4. color可选。阴影的颜色

代码示例

<p style="text-shadow:5px 5px 3px rgba(0,0,0,0.6);font-size:30px">这是一个例子</p>

实现效果

这是一个例子

文字阴影综合

这是一个例子

block-level:块级元素

每个块级元素通常都会独占一行或者是多行,可以对其单独设置高度,宽度以及对齐等属性。

常见的块级元素有:<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>

块级元素的特点:

  1. 块级元素会独占一行
  2. 高度,行高,外边距和内边距都可以单独设置
  3. 宽度默认是容器的100%
  4. 可以容纳内联元素和其他的块级元素

inline-level:行内元素

行内元素(内联元素):不占有独立的区域,仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度,高度以及对齐等属性。

常见的行内元素有:<a>,<strong>,<b>,<em>,<del>,<span>等

行内元素的特点 :

  1. 和相邻的行内元素在一行上
  2. 高度和宽度无效,但是水平方向上的padding和margin可以设置,垂直方向上的无效
  3. 默认的宽度就是它本身的宽度
  4. 行内元素只能容纳纯文本或者是其他的行内元素(a标签除外)

display:显示模式的转换

none此元素不会被显示。
block此元素将显示为块级元素,此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block行内块元素。(CSS2.1 新增的值)
list-item此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。

background:背景

background-color背景颜色
background-image背景图片[url()]
background-repeat是否平铺[repeat-x/repeat-y/no-repeat]
background-position背景位置
background-attachment背景固定/滚动 默认scroll(滚动)| fixed(固定)
background-size背景图片的位置 px | cover |contain

标签云

ajax AOP Bootstrap cdn Chevereto CSS Docker Editormd Hexo IDEA JavaScript jsDeliver JS樱花特效 Linux markdown Maven MyBatis MyBatis-plus MySQL Pictures Sakura SEO Spring Boot SpringMVC SSR Thymeleaf V2ray Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运