CSS样式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46111822/article/details/108220432

Css的基本概念

Cascading style sheet 层叠样式表

标题

标签:

….之类的标签使用方式：直接输入标签名

类（class）：class名字
使用方式：舒勇点+class名

Id：id名
使用方式：输入#+id名

一般来说我们写css文件的时候用的都是第二种选择器：class。
这是因为id名一般用作js的选择器。
给class命名也是规范的，像xxx-xxx 这样做的好处是让你的代码更清晰。
别人也更容易懂。

三种连接样式

1、行内样式（内嵌样式）

<body>
                 <div
class="poetry">
                 <h1 style="color:
green;">登黄鹤楼</h1>
                 <p id="text1">白日依山尽，</p>
                 <p
class="text2">黄河入海流</p>
                 <p
class="text3">欲穷千里目</p>
  <p
class="text4">更上一层楼</p>
        </div>     
        </body>

直接写在标签李，使用style直接写在标签里，只对当前标签有效，页面内容和表现形式是高度耦合的，不利于分工合作

2、内部样式

<style
type="text/css">
                         font-size: 24px;
                 </style>

内部样式是head部分使用<style>标签，样式对当前页面有效，内容和表现形式实现了一定程度的分离，但不彻底

3、外部样式

#text1{

        color: pink;
}
.text4{
        text-align: right;
}
.text2{
        text-align: left;
}
.text3{
        font-family: 幼圆;
        /* 字体样式*/
        font-size: 50px;
        /* 字体大小*/
        font-style:italic ;
        /* 是否倾斜*/
        font-weight: bold;
        /* 字体粗细*/

}

外部样式需要link标签与html连接起来，内容和表现形式完全分离，而且任何需要用到改样式的页面都可以通过link标签连接的方式来实现。

字体相关属性

Text-align（对齐方式）：centet（居中） /left（靠左）/right（靠右）

font-size（字体大小）: 56px/24px/xxxpx

font-famliy（字体体系）：“黑体”/“幼圆”

font-style（是否倾斜）: italic（倾斜）/normal（正常） ;

font-weight（字体粗细）:100/200/300/normal（400）/bold（700）/bolder

font-variant(是否大写)：normal/small-caps（小型大写）

color（字体颜色）：blue/red/pink/black/green/#0000（可以用颜色的英文，也可以用字符码）

text-decoration:none(默认，无)/underline（下划线）/overline（上划线）/line-through（删除线）

<p
style="text-decoration: line-through;">12345</p>

direction:ltr(left to right 从右到左)/rtl（right to
left 从左到右）

<div style="direction: rtl;">4 5 7
7</div>

Text-transform:none（默认）/capitalize(英文首字母大写)/uppercase(所有字母都大写)/ lowercase（让字母全部小写）

<p style="text-transform: capitalize;">sdas sfdf  fgfg</p>
        <p style="text-transform:uppercase">sdas sfdf fgfg</p>
      <pstyle="text-transform: lowercase;">SDAS SFDF FGFG</p>

Line-heigjt(设置行高)：normal/xxx px

<p
style="line-height: normal;">
                         正常行高<br />
                         正常行高<br />
                         正常行高<br />
                         正常行高        
                 </p>
                 <p style="line-height: 42px;">
                         42行高<br />
                         42行高<br />
                         42行高<br />
                         42行高   
                 </p>

Letter-spacing(字符间距)：2px/5px/xxxpx

<p style="letter-spacing: normal;">sdasdafs</p>

     <p style="letter-spacing: 50px;">sdasdafs</p>

Word-spacing(单词间距)：2px/5px/xxxpx

<p
style="word-spacing: 50px;">sds  sd</p>

css的基本概念

Css的基本概念

标题

三种连接样式

字体相关属性