CSS语法总结

godlong_X 发布于2019-08-30 13:09 / 3102人阅读

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

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

一、CSS写法：

css 代码

选择器{
    属性名：属性值 
}

二、写在什么地方：

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

行内样式

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




    
    Document

内部样式

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




    
    Document

外部样式

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




    
    Document

css 代码

.exp{
    height: 30px;
    width: 20px;
    background-color: #123456;
    box-shadow: 0 0 1px #132478;
}

三、注释：

css 代码

.exp{
    background: #123444;    /*背景色，注释用此符号*/
    height: 90px;
    width: 80px;    //CSS中的注释不能用此符号，和HTML有所不同
}

注：

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

四、属性值语法：

五、组合符号： 1、空格数量与顺序必须保持一致

 <"font-size"> <"font-family">
 合法值：
 12px arial
 不合法值：
 12px   或者 arial 12px

2、&& 数量必须一致，顺序随意

 &&
 合法值：
 green 2px  或者  2em blue
 不合法值：
 blue  或者  5em

3、|| 必须出现一个，顺序无关

 underline||overline||linethrough||blink
 合法值：
 underline  或者  overline underline

4、| 只能出现一个

 |transparent
 合法值：
 #123456  或者  transparent
 不合法值：
 #aabb33 transparent

5、[] 分组作用，作为整体

 bold [thin||]     合法值：
 bold thin  或者  bold 3px

七、数量符号： 1、无

     只能出现一次
 合法值：
 1px  或者  10em
 不合法值：
 1px 3em 5px

2、+ 可以出现一次或多次

 [,]+
 合法值：
 #fff,red,yellow  或者  blue,red 50%,black
 不合法值：
 #123456

3、？可出现，也可不出现

 inset？&&
 合法值：
 inset #123445  或  #abcd33

4、{} 基本元素可以出现几次（最少出现几次，最多出现几次）

 {2,4}    最少出现两次，最多出现四次
 合法值：
 1px 3em  或者  1px 3px 5em
 不合法值：
 3px

5、* 可以出现0次，1次或者多次

 [,]*
 合法值：
 1s     出现0次
 1s,5ms    出现1次

6、# 出现1次或多次，中间用”,"隔开

 #    相当于    [,]*
 合法值：
 2s,4s,8s
 不合法值：
 2s 4s

八、@规则语法： 1、@标识符 xxx; 2、@标识符 xxx{} 常用的：

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

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

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

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

CSS语法总结

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

changfeng1050 2019-08-01 15:59 评论0 收藏0
『总结』常见开发问题解决

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

Wildcard 2019-08-21 16:21 评论0 收藏0
『总结』常见开发问题解决

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

xiaoxiaozi 2019-08-29 13:22 评论0 收藏0
CSS 高度(css height)

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

sf_wangchong 2019-04-23 13:13 评论0 收藏0