CSS基本概念及样式的用法

 

CSS的基本概念

全称：Cascading Style Sheet 层叠样式表

 

选择器

标签：<p><div>…之类的标签               使用方式：直接输入标签名

类 (class)：class名字                            使用方式：输入点+class名

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

一般来说我们写CSS文件的时候用的都是第二种选择器，class名

这是因为ID名一般被用作 JS的选择器

给class命名也是规范的，像xxx – xxx 这样做的好处是让你打的代码更清晰

别人也容易看懂

 

三种连接样式

行内样式（内嵌样式）

 

直接写在标签里，使用style属性，只对当前标签有效，页面内容和表现形式是高度

内部样式

 

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

外部样式（外联样式）：

 

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

字体相关属性

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

.poetry{

       text-align: center;

}

 

Font-size（字体大小）：xx px  像素

p{

       font-size: 24px ;

}

 

Font-family（字体体系）：“黑体”/“幼圆”

.text3{

       font-family: "幼圆";

      

       font-size: 40px ;

}

 

Font-style（是否倾斜）：italic（倾斜）/normal（正常）

#text4{

       color: coral;

       font-style: italic;

      }

 

Font-weight（字体粗细）：100/200/normal（400）/bold（700）/bolder

p{

       font-size: 24px ;

       font-weight: 200;

}

 

Font-variant（是否大写）：normal/small-caps（小型大写）

.text5{

       font-variant: small-caps;

}

 

Color（字体颜色）：blue/red…

.text1{

       color: #FFC0CB;

}

 

text-decoration：none（默认格式，无）/underline（下划线）/overline（上划线）/line-throough（删除线）

<p style="text-decoration: underline overline; word-spacing: 50px;">要说江西 谁最帅</p>

 

direction（文本方向）：ltr（left to right 从左到右）/rtl（右到左）

<p style="direction: ltr;">1 2 3 4 5</p>

                     <p style="direction: rtl;">1 2 3 4 5</p>

 

text-transform：none/capitalize（首字母大写）/uppercase（全部大写）/lowercase（全部小写   ）

<p style="text-transform: capitalize;">Welcome to JX</p>

 

line-height（行高）：normal/xx px

<p style="line-height: normal;">

                            正常行高<br>

                            正常行高<br>

                            正常行高

                     </p>

 

letter-spacing（字符间距）：2px/5px/xxpx

<p style="letter-spacing: 30px;">我是间距</p>

 

word-spacing（单词间距）：normal/2px/xxpx

<p style="word-spacing: 300px;">r i c h</p>