文章目录CSS基本概念：一、选择器二、 三种连接样式1.行内样式（内嵌样式）:2.内联样式：3.外部样式（外联样式）：三、字体相关属性

CSS基本概念：

1.CSS（Cascading Style Sheet） 层叠样式表



一、选择器

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

2.类（class）：class名字			使用方式：输入点+class名

3.ID：（ID）名	使用方式：输入#+id名

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

class名；这是因为id名一般被用作js的选择器

给class命名是有规范的，像xxx-xxx这样做的好处是

让你的代码更清晰别人更容易看懂



二、 三种连接样式

1.行内样式（内嵌样式）:

<h1 style="color: blue;">绝句</h1>


直接写在标签里，使用style属性，只对当前标签有效，

页面内容和表现形式是高度耦合的，不利于分工合作



2.内联样式：

<style>

    p{

        font-size: 24px;

    }

</style>

内部样式是在head部分使用<style>标签，样式对当前页面有效，

内容和表现形式实现了一定程度的分离，但不彻底。



3.外部样式（外联样式）：
#text1{

    color: pink;

}

.text2{

    text-align: left;

}

<link rel="stylesheet" href="css/css01.css">
外部样式样式需要一个link标签与html连接起来，内容与表现形式完全分离

，而且任何需要用到改样式的页面都可以通过link标签连接的方式来实现



三、字体相关属性
1.text-algin（对齐方式）:center/left/right

2.font-size（字体大小）:56px/xxpx

3.font-family（字体体系）:”黑体”/”幼圆”

4.font-style（是否倾斜）:italic（倾斜）/

    normal（正常）

5.font-weight（字体粗细）:100/200/

   normal (400) /bold (700) /bolder

6.font-variant（是否大写）:normal/small-caps（小型大写）

7.color（字体颜色）:blue/red/pink/#FFFFFF/#F6F6F6

8.text-decoration:none（默认格式，无）/underline（下划线）

        overline（上划线）   /line-through（删除线）

9.direction（文本方向）:ltr（left to right、从左往右）

        rtl（right to left、从右往左）

10.text-transform:none（默认）/capitalize（首字母大写

       uppercase（全部大写）/lowercase（全部小写）

11.line-height（行高）:normal/xx_px

12.letter-spacing（字符间距）;2px/xx_px

13.word-spacing（单词间距）:normal/2px/xx_px (加空格才有效果)


原创：https://www.panoramacn.com

源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。
专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说


免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。
您必须遵守我们的协议，如果您下载了该资源行为将被视为对《免责声明》全部内容的认可->
联系客服
投诉资源
 www.panoramacn.com资源全部来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。
敬请谅解！ 侵权删帖/违法举报/投稿等事物联系邮箱：2640602276@qq.com
                
                
未经允许不得转载：书荒源码源码网每日更新网站源码模板！ » Day4-CSS的基本概念
                                
                                    
Day4-CSS的基本概念
                                
                    

        

            
            
关注我们小说电影免费看
            
关注我们，获取更多的全网素材资源，有趣有料！
            
120000+人已关注
        
    
 
                
                    


                    
分享到：
        
                                赞(0)
        
                    打赏