资讯专栏INFORMATION COLUMN

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

立即前往
首页/文章专栏/CSS语法总结

CSS语法总结

godlong_X / 3245人阅读

摘要：在学习的过程中，了解并掌握的语法是至关重要的，在这里总结一下相关的语法。一写法代码选择器属性名属性值二写在什么地方有三种方式，分别为行内样式，内部样式，外部样式。

在学习CSS的过程中，了解并掌握CSS的语法是至关重要的，在这里总结一下相关的语法。

一、CSS写法：

css 代码

</>复制代码 
  1. 选择器{
  2.     属性名：属性值 
  3. }
二、写在什么地方：

有三种方式，分别为：行内样式，内部样式，外部样式。

行内样式

直接写在HTML标签内，写于style属性当中

</>复制代码 
  2.     
  3.     Document
  4.
内部样式

写在头部标签内，置于style标签内部

</>复制代码 
  2.     
  3.     Document
  4.     
  5.
外部样式

在head中用link标签引入，置于CSS文件中

</>复制代码 
  2.     
  3.     Document
  4.     
  5.

css 代码

</>复制代码 
  1. .exp{
  2.     height: 30px;
  3.     width: 20px;
  4.     background-color: #123456;
  5.     box-shadow: 0 0 1px #132478;
  6. }
三、注释：

css 代码

</>复制代码 
  1. .exp{
  2.     background: #123444;    /*背景色，注释用此符号*/
  3.     height: 90px;
  4.     width: 80px;    //CSS中的注释不能用此符号，和HTML有所不同
  5. }
注：

在写法上，浏览器的私有属性放在前面，标准属性放在后面。
私有属性需要加前缀：加-webkit-，加-moz-，加-ms-，加-o-。

四、属性值语法：

五、组合符号： 1、空格 数量与顺序必须保持一致 
</>复制代码 
  1.  <"font-size"> <"font-family">
  2.  合法值：
  3.  12px arial
  4.  不合法值：
  5.  12px   或者 arial 12px
2、&& 数量必须一致，顺序随意 
</>复制代码 
  1.  &&
  2.  合法值：
  3.  green 2px  或者  2em blue
  4.  不合法值：
  5.  blue  或者  5em
3、|| 必须出现一个，顺序无关 
</>复制代码 
  1.  underline||overline||linethrough||blink
  2.  合法值：
  3.  underline  或者  overline underline
4、| 只能出现一个 
</>复制代码 
  1.  |transparent
  2.  合法值：
  3.  #123456  或者  transparent
  4.  不合法值：
  5.  #aabb33 transparent
5、[] 分组作用，作为整体 
</>复制代码 
  1.  bold [thin||]     合法值：
  2.  bold thin  或者  bold 3px
七、数量符号： 1、无 
</>复制代码 
  1.      只能出现一次
  2.  合法值：
  3.  1px  或者  10em
  4.  不合法值：
  5.  1px 3em 5px
2、+ 可以出现一次或多次 
</>复制代码 
  1.  [,]+
  2.  合法值：
  3.  #fff,red,yellow  或者  blue,red 50%,black
  4.  不合法值：
  5.  #123456
3、？ 可出现，也可不出现 
</>复制代码 
  1.  inset？&&
  2.  合法值：
  3.  inset #123445  或  #abcd33
4、{} 基本元素可以出现几次（最少出现几次，最多出现几次） 
</>复制代码 
  1.  {2,4}    最少出现两次，最多出现四次
  2.  合法值：
  3.  1px 3em  或者  1px 3px 5em
  4.  不合法值：
  5.  3px
5、* 可以出现0次，1次或者多次 
</>复制代码 
  1.  
  2.  合法值：
  3.  1s     出现0次
  4.  1s,5ms    出现1次
6、# 出现1次或多次，中间用”,"隔开 
</>复制代码 
  1.  
  2.  合法值：
  3.  2s,4s,8s
  4.  不合法值：
  5.  2s 4s
八、@规则语法： 1、@标识符 xxx; 2、@标识符 xxx{} 常用的：

@media 响应式布局
@keyframe 描述动画的中间步骤
@font-face 引入外部字体

云服务器 GPU云服务器 年终总结 网络总结 方法总结 函数总结

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

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

相关文章

  • CSS语法总结

    摘要：在学习的过程中，了解并掌握的语法是至关重要的，在这里总结一下相关的语法。一写法代码选择器属性名属性值二写在什么地方有三种方式，分别为行内样式，内部样式，外部样式。 在学习CSS的过程中，了解并掌握CSS的语法是至关重要的，在这里总结一下相关的语法。 一、CSS写法： css 代码 选择器{ 属性名：属性值 } 二、写在什么地方： 有三种方式，分别为：行内样式，内部样式，外部...

    changfeng1050 评论0 收藏0

  • 『总结』常见开发问题解决

    摘要：移动端开发标签中的属性，在去除跳转需求，事件选用而不是，使用会失效。或者此外注意的地方有两点在用写事件相关代码时，要使用事件委托的形式的时效要比要快。老版本语法老版本语法混合版本语法新版本语法待续 移动端开发 a标签中的href属性，在去除跳转需求，事件选用click而不是tap，tap使用会失效。 $(document).on(click, .J_Remove, function(...

    Wildcard 评论0 收藏0

  • 『总结』常见开发问题解决

    摘要：移动端开发标签中的属性，在去除跳转需求，事件选用而不是，使用会失效。或者此外注意的地方有两点在用写事件相关代码时，要使用事件委托的形式的时效要比要快。老版本语法老版本语法混合版本语法新版本语法待续 移动端开发 a标签中的href属性，在去除跳转需求，事件选用click而不是tap，tap使用会失效。 $(document).on(click, .J_Remove, function(...

    xiaoxiaozi 评论0 收藏0

  • CSS 高度(css height)

    摘要：同时也无需使用来实现高度自适应。通常默认情况下不用再设置高度值为，对象高度即是自适应高度。高度不能设置百分比高度如设置百分比的高度无效。扩展阅读宽度最小高度最大高度转载来源网址DIV+CSS height高度知识教程篇 DIV CSS高度简介这里的CSS高度是指通过CSS来控制设置对象的高度。使用CSS属性单词height。单位可以使用PX，em等常用使用PX（像素）为html单位。 he...

    sf_wangchong 评论0 收藏0

发表评论

登陆后可评论

0条评论

godlong_X

男|高级讲师
我要私信

TA的文章

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