CSS 基础样式及基本属性

太过爱你忘了你带给我的痛 2021-10-25 12:44 457阅读 0赞

*  CSS 基础样式及基本属性
    
     *  行内样式
     *  内嵌式
     *  链接式
 *  CSS 样式的基本属性
    
     *  **背景属性**
     *  **文本属性**
     *  链接属性 选择器
     *  轮廓 突出元素的作用
     *  列表
     *  表格
     *  定位

# CSS 基础样式及基本属性 #

--------------------

## 行内样式 ##

行内样式直接定义再HTML标记之内，通过style属性来实现。这种方式比较容易接受，但是灵活性不强。

## 内嵌式 ##

在页面中使用`<style></style>`标记将CSS样式包含在页面中。该方式没有行内标记表现的直接，但是能够使页面更加规整。 与行内样式相比，内嵌式样式更加便于维护。

## 链接式 ##

链接外部 CSS 样式表是最常见的一种引用样式表的方式，将CSS样式定义在一个单独的文件中，然后在HTML页面中通过`<link>`标记引用，是一种最为有效的使用CSS样式的方式。

# CSS 样式的基本属性 #

## **背景属性** ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>background-color:black</td> 
   <td>背景颜色</td> 
  </tr> 
  <tr> 
   <td>background-image : url(image/bg.gif)</td> 
   <td>背景图片</td> 
  </tr> 
  <tr> 
   <td>background-attachment : fixed</td> 
   <td>固定背景</td> 
  </tr> 
  <tr> 
   <td>background-repeat : no-repeat</td> 
   <td>不重复排列</td> 
  </tr> 
  <tr> 
   <td>background-position : 90% 90%</td> 
   <td>背景图片x与y轴上的起始位置</td> 
  </tr> 
 </tbody> 
</table>

## **文本属性** ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color : #999999</td> 
   <td>文字颜色</td> 
  </tr> 
  <tr> 
   <td>font-family :STfangsong</td> 
   <td>文字字型</td> 
  </tr> 
  <tr> 
   <td>font-size: 10px</td> 
   <td>文字大小</td> 
  </tr> 
  <tr> 
   <td>font-style:italic</td> 
   <td>文字斜体</td> 
  </tr> 
  <tr> 
   <td>font-variant:small-caps</td> 
   <td>小字体</td> 
  </tr> 
  <tr> 
   <td>text-decoration:overline</td> 
   <td>加顶线</td> 
  </tr> 
  <tr> 
   <td>text-align:left</td> 
   <td>文字左对齐</td> 
  </tr> 
  <tr> 
   <td>line-height: 200%</td> 
   <td>设定行高</td> 
  </tr> 
  <tr> 
   <td><strong>letter-spacing: 1px</strong></td> 
   <td>文字间距</td> 
  </tr> 
  <tr> 
   <td>font-weight:bold</td> 
   <td>文字粗体</td> 
  </tr> 
  <tr> 
   <td>vertical-align:sub</td> 
   <td>下标字</td> 
  </tr> 
  <tr> 
   <td>vertical-align:super</td> 
   <td>上标字</td> 
  </tr> 
  <tr> 
   <td>text-transform: capitalize</td> 
   <td>元素中的字母，首字大写</td> 
  </tr> 
  <tr> 
   <td>text-transform : uppercase</td> 
   <td>英文大写</td> 
  </tr> 
  <tr> 
   <td>text-transform : lowercase</td> 
   <td>元素中的字母，英文小写</td> 
  </tr> 
  <tr> 
   <td>direction:ltr</td> 
   <td>文本方向从左到右（默认）</td> 
  </tr> 
  <tr> 
   <td><strong>direction:rtl</strong></td> 
   <td>文本方向，从右到左</td> 
  </tr> 
  <tr> 
   <td>text-indent: 10px;</td> 
   <td>缩进元素中文本的首行</td> 
  </tr> 
 </tbody> 
</table>

<p><span style="vertical-align: super;">上标：™️</span>这是段落。</p> <hr /> <p style="text-indent: 10px;">段落的首行缩进10px</p>

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>  <p id="p1" style="letter-spacing: 1px;direction: rtl;"></p> <button onclick="func_1()">点击获取</button> </body> </html> <script> var a = ""; var result; function func_1(){ for (var i = 1;i<=9;i++) { for (var j = 1;j<=i;j++) { result = i*j; a += i+"*"+j+"="+result+" "; document.getElementById("p1").innerHTML = a; } a += "<br/>" /* 内部循环一次后，换行*/ } } </script>

![99乘法表 倒三角 靠右侧][99_ _]

## 链接属性 选择器 ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>a:link</td> 
   <td>普通的、未被访问的链接</td> 
  </tr> 
  <tr> 
   <td>a:visited</td> 
   <td>用户已访问的链接</td> 
  </tr> 
  <tr> 
   <td>a:hover</td> 
   <td>鼠标指针位于链接的上方</td> 
  </tr> 
  <tr> 
   <td>a:active</td> 
   <td>链接被点击的时刻</td> 
  </tr> 
 </tbody> 
</table>

## 轮廓 突出元素的作用 ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>outline</td> 
   <td>设置轮廓属性</td> 
  </tr> 
  <tr> 
   <td>outline-color</td> 
   <td>设置轮廓颜色</td> 
  </tr> 
  <tr> 
   <td>outline-style</td> 
   <td>设置轮廓样式</td> 
  </tr> 
  <tr> 
   <td>outline-width</td> 
   <td>设置轮廓宽度</td> 
  </tr> 
 </tbody> 
</table>

<body> <p style="outline:green dashed thick;border:1px solid red;"> 标签定义水平线 </p> </body>

![outline:color style width;][outline_color style width]

## 列表 ##

可放置或改变列表标志，或者将图像作为列表标志。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>list-style：none</td> 
   <td>去掉圆点</td> 
  </tr> 
 </tbody> 
</table>

## 表格 ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-collapse: collapse</td> 
   <td>折叠边框，相当于去除</td> 
  </tr> 
  <tr> 
   <td>padding</td> 
   <td>表格内边距</td> 
  </tr> 
 </tbody> 
</table>

## 定位 ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>position</td> 
   <td>把元素放在一个静态的、相对的、绝对的或固定的位置中</td> 
  </tr> 
  <tr> 
   <td>top、bottom</td> 
   <td>元素向上 、下的偏移量</td> 
  </tr> 
  <tr> 
   <td>left、right</td> 
   <td>元素向左、右的偏移量</td> 
  </tr> 
  <tr> 
   <td>static</td> 
   <td>偏移属性没有效果</td> 
  </tr> 
  <tr> 
   <td>relative、absolute</td> 
   <td>相对位置、绝对位置</td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td>随页面滑动而滑动</td> 
  </tr> 
  <tr> 
   <td>overflow</td> 
   <td>设置元素溢出后的效果</td> 
  </tr> 
 </tbody> 
</table>

--------------------

转载于:https://www.cnblogs.com/HevateArvin/p/10270318.html

[99_ _]: https://ws4.sinaimg.cn/large/006tNc79gy1fz3og1wkdmj30fd05zt9c.jpg
[outline_color style width]: https://ws1.sinaimg.cn/large/006tNc79gy1fz3qlirjudj308y014weh.jpg