资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/css的基础用法（上）

css的基础用法（上）

番茄西红柿 / 2602人阅读

摘要：选择器可以可以标签选择器直接在标签里面，标签名字就可以选择到。内容会被修剪，并且其余内容是不可见的。规定应该从父元素继承属性的值。起到给加圆角的作用。代表的是上下，左右。代表的是上，右，下，左。

css定义：

　　CSS层叠式样表（Cascading  Style Sheets）是一种用来表现html或xml等文件样式的计算机语言。CSS不仅可以静态的修饰网页，还可以配合各种脚本语言动态地对网页个元素进行格式化。

　　CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。  

一、常用选择器：

 

</>复制代码 
  1.  1 <html>
  2.  2          <head>
  3.  3                   <meta charset="utf-8" />
  4.  4                   <title>选择器title>
  5.  5                   <style>
  6.  6                            #box1{width:150px;height:150px;background:red;}
  7.  7                            .box2{width:200px;height:150px;border:1px solid red;}
  8.  8                   style>
  9.  9          head>
  10. 10          <body>
  11. 11                   <div id="box1">1div>
  12. 12                   <div class="box2">2div>
  13. 13                   <div>3div>
  14. 14          body>
  15. 15     
  16. 16 html>

 

id选择器：

　　首先给标签起名，修饰你想要修饰的那个标签直接#id

class选择器：

　　给标签起个class名字，你想修饰的时候.class名字。

　　它可以写多个class名字用空格隔开。

</>复制代码 
  1.  1 <html>
  2.  2          <head>
  3.  3                   <meta charset="utf-8">
  4.  4                   <title>选择器title>
  5.  5                   <style>
  6.  6                            #box1 , .box2 , p{width:150px;height:150px;border:1px solid blue;}
  7.  7                   style>
  8.  8          head>
  9.  9          <body>  
  10. 10                    <div id="box1">1div>
  11. 11                    <div class="box2">2div>
  12. 12                    <p>可以可以p>
  13. 13          body>
  14. 14 html>

标签选择器：

　　直接在style标签里面，

　　标签名字就可以选择到。

组合选择器：

　　#id，.class名字，标签名字{}

</>复制代码 
  1.  1 <html>
  2.  2          <head>
  3.  3                   <meta charset="utf-8" />
  4.  4                   <title>选择器title>
  5.  5                   <style>
  6.  6                            .xx .cc p{width:120px;height:120px;border:1px solid yellow;}
  7.  7                   style>
  8.  8          head>
  9.  9          <body>
  10. 10                   <div class="xx">
  11. 11                           <div class="cc">
  12. 12                                   <p>这里p>
  13. 13                           div>
  14. 14                   div>
  15. 15          body>
  16. 16 html>

层级选择器：

　　一层一层往下找，#box div

</>复制代码 
  1.  1 <html>
  2.  2          <head>
  3.  3                    <meta charset="utf-8" />
  4.  4                    <title>选择器title>
  5.  5                    <style>
  6.  6                             a:link{color:red;}
  7.  7                             a:visited{color:blue;}
  8.  8                             a:active{color:yellow;}
  9.  9                             a:hover{color:pink;}
  10. 10                    style>
  11. 11          head>
  12. 12          <body>
  13. 13                    <a href="http://www.baidu.com">百度一下a>
  14. 14          body>
  15. 15 html>

伪类选择器：

　　a:link //链接的时候默认的字体颜色；

       a:visited //访问过后的颜色;

　　a:active //当你鼠标点击的时候显示的颜色；

　　a:hover //鼠标悬停上面的时候，就是说鼠标移入的时候。

二、常用属性：

 

</>复制代码 
  1.  1 <html>
  2.  2          <head>  
  3.  3                    <meta charset="utf-8" />
  4.  4                    <title>常用元素title>
  5.  5                    <style>
  6.  6                             div{width:300px;height:300px;background:blue;text- 
  7.  7                             align:center;line-height:300px;overflow:hidden;border- 
  8.  8                             radius:50%;}
  9.  9                             .p{font-size:20px;font-weight:bolk;}
  10. 10                              b{font-weight:normal;color:red;font-family:楷体；}
  11. 11                              li{list-style:none}
  12. 12                              a{text-decoration:line-through;}
  13. 13                              body{background:url(bjqs.jpg) repeat-y;}
  14. 14                    style>
  15. 15          head>
  16. 16          <body>
  17. 17                   <a href="http://www.baidu.com">百度一下a>
  18. 18                   <div>
  19. 19                          今天多云！今天多云！今天多云！今天多云！今天多云！
  20. 20                   div>
  21. 21                   <p class="p">看这看这p>
  22. 22                   <b>c罗牛逼b>
  23. 23                   <ul>
  24. 24                         <li>世界杯a组li>
  25. 25                         <li>世界杯b组li>
  26. 26                   ul>
  27. 27          body>
  28. 28 html>

 

px:像素

font-family：字体名称

font-size：字体大小

font-style：字体的样式（如斜体）

font-variant：字体的变化（如大写）

font-weight：字体粗细

color：设置文本颜色

text-decoration：文本的修饰

　　　1、none 默认值，没有装饰效果

　　　2、underline 加一条下划线　　

　　　3、overline 加一条上划线

　　　4、line-through 加删除线

text-shadow：设置字体的阴影，如：text-shadow:-5px 3px black 定义一个黑色的阴影颜色，其水平方向左移5px，垂直方向上移3px。

direction：表示文本的方向，ltr：自左至右，  rtl：自又至左

text-align：文本对齐方式。  left：左对齐 ， right：右对齐，  center：居中 ，justify：两端对齐

lineheight：可以设置文本的垂直的位置用px进行设置。

vertical-align：文本垂直对齐方式。top：靠上对齐，bottom：靠下对齐，middle：垂直居中对齐

overflow：属性规定当内容溢出元素框时发生的事情。可能的值：

　　1、visible：默认值，内容不会被修改，会呈现在元素框之外。

　　2、hidden：内容会被修剪，并且其余内容是不可见的。

　　3、scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

　　4、auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容。

　　5、inherit：规定应该从父元素继承overflow属性的值。

border-radius：起到给div加圆角的作用。当border-radius的值等于或大于50%的时候，就变成了一个圆形。

text-indent：文本缩进方式。

　　1、letter-spacing：字符之间的间距

　　2、word-spacing：字的间距

line-height：设置行高，实际上是调整行间距。

3、盒子模型：

</>复制代码 
  1.  1 <html>
  2.  2          <head>
  3.  3                  <meta charset="utf-8" />
  4.  4                  <title>盒子模型title>
  5.  5                  <style>
  6.  6                           div{width:200px;opacity:0.5;
  7.  7                                height:200px;
  8.  8                                background:black;
  9.  9                                 margin:5px 6px 7px 8px;
  10. 10                                 padding:5px 6px 7px 8px;}
  11. 11                  style>
  12. 12          head>
  13. 13          <body>
  14. 14                   <div>div>
  15. 15          body>
  16. 16 html>

opacity:透明度。

margin：外边界。maigin-left 外左边界，margin-right 外右边界，margin-top 外上边界，margin-bottom 外下边界。

padding：内边界。padding-left 内左边界，padding-right 内右边界，padding-top 内上边界，padding-bottom 内下边界。

margin：0 auto 上下为零，左右居中。

margin：5px 代表的是四边。

margin：5px 6px 代表的是上下5px，左右6px。

margin：5px 6px 7px 代表的是上5px，左右6px，下7px。

margin：5px 6px 7px 8px 代表的是上5px，右6px，下7px，左8px。

padding与margin类似。

4、浮动、标签类型转换：

</>复制代码 
  1.  1 <html>
  2.  2          <head>
  3.  3                   <meta charset="utf-8" />
  4.  4                   <title>标签类型转换title>
  5.  5                   <style>
  6.  6                            div{display:inline-                   
  7.  7                                 block;width:20px;height:20px;background:red}
  8.  8                            span{display:block;
  9.  9                            width:50px;height:60px;background:yellow;}
  10. 10 
  11. 11                   style>
  12. 12          head>
  13. 13          <body>
  14. 14                    <div>类性转换div>
  15. 15                    <div>不能类型转换div>
  16. 16                    <span>这是一个行内标签span>
  17. 17          body>
  18. 18 html>

display:inline 转换成行内。

display:block 转换成快。

display:inline-block;

display:none 不显示。

</>复制代码 
  1.  1 <html>
  2.  2          <head>
  3.  3                   <meta charset="utf-8" />
  4.  4                   <title>浮动title>
  5.  5                   <style>
  6.  6                            /*.father{overflow:hidden;}*/
  7.  7                            .i{clear:both;}
  8.  8                            .clearFix:after{display:block;content:;clear:both;zoom:1;}
  9.  9                            .xx{width:200px;height:50px;background:red;float:left;}
  10. 10                            .cc{width:200px;height:50px;background:red;float:right;}
  11. 11                   style>
  12. 12          head>
  13. 13          <body>
  14. 14                    <div class="father clearFix">
  15. 15                           <div class="xx">世界杯div>
  16. 16                           <i>i>
  17. 17                           <div class="cc">奥运会div>
  18. 18                    div>
  19. 19          body>
  20. 20 html>

浮动：

　　作用：放在一行。特点：1、元素变成快。2、顶对齐。   

　　加浮动就要给清浮动。

清除浮动的方式：

　　1、给父级加overflow:hidden;

　　2、给你需要清除浮动的元素的下面加上一个空白的块标签给你的空白的标签加上clear:both.

　　3、.clearFix:after{display:block;content:;clear;both;zoom:1;}

　　使用：把clearFix加在你清除的标签 注意是类名 class="clearFix".

 

 

 

 

 

　　

 

　　

 

云服务器 GPU云服务器 php中css的用法 css基础 基础css css基础教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2072.html

相关文章

  • 补习前端（css+html）基础-1：

    摘要：标签将表单内容的一部分打包，生成一组相关表单的字段。提示和注释注释元素是空元素，它仅包含属性。注释此元素只能存在于部分，不过它可出现任何次数。属性属性规定当前文档与被链接文档之间的关系。该标签用于组合表格的主体内容。 1.HTML 标签: 实例 组合表单中的相关元素： health information height: weight: 定义和用法 fieldset 元素...

    marek 评论0 收藏0

  • 补习前端（css+html）基础-1：

    摘要：标签将表单内容的一部分打包，生成一组相关表单的字段。提示和注释注释元素是空元素，它仅包含属性。注释此元素只能存在于部分，不过它可出现任何次数。属性属性规定当前文档与被链接文档之间的关系。该标签用于组合表格的主体内容。 1.HTML 标签: 实例 组合表单中的相关元素： health information height: weight: 定义和用法 fieldset 元素...

    douzifly 评论0 收藏0

  • SVG基础教程(超级详细)

    摘要：光滑三次贝塞尔曲线指令跟在指令或指令后面补刀，它会自动在基础上生成一个对称点，所以指令只需要两个点就可以。二次贝塞尔曲线是控制点，表示的是曲线的终点。 一、内置图形: rect(矩形) circle(圆) ellipse(椭圆) line(直线) polyline(折线) polygon(多边形) path(路径) 二、内置图形的html属性或(css样...

    张宪坤 评论0 收藏0

  • CSS基础篇-- :before && :after的用法，伪类和伪元素的区别

    摘要：一的用法如同对伪元素的名称一样，是用来给指定的元素的内容前面插入新的内容。二伪类和伪元素的区别伪类种类伪元素种类伪类作用对象是整个元素例如尽管这些条件不是基于的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，等等。 一：:before && :after的用法 :before 如同对伪元素的名称一样，:before 是用来给指定的元素的内容前面插入新的内容。举例说明： .b...

    X_AirDu 评论0 收藏0

  • [ 学习路线 ] 学完这些去阿里！GOGOGO

    摘要：以下知识点是前辈师兄总结基础语义化标签引进了一些新的标签，特别注意等，注意的标题结构理解浏览器解析的过程，理解的树形结构，及相应理解标签在各个浏览器上的默认样式代理样式，理解中的重置样式表的概念理解等功能性标签理解标签，理解文件提交过程推荐 以下知识点是前辈师兄总结 1、HTML/HTML5基础： 1.0、语义化H5标签1.1、H5引进了一些新的标签，特别注意article...

    zhaochunqi 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<