1、css(层叠样式表)样式主要目的(让页面更好看些)

css尽量不要写内联样式,保证结构和样式分离原则;

html专门负责结构,css专门负责样式。

2、css写法规范

选择器  { 属性 :值 ; }

内联样式  写在标签里   style=“”属性:值“”

内部样式  写在head标签里的style标签里

外部样式   通过链接导入样式表  link

3、font-size(字号大小)

4、浏览器默认字体font-family 微软雅黑 ,字体大小一般默认为16px

一般不想写中文是可以用uncode字体,并且尽量只写宋体和微软雅黑

5、*  指的是选择所有标签

* {

color:red;

}

6、font-weight : nomal(相当于400)、bold(700)、bolder、lighter、100-900(100的整数倍)

7、字体综合设定(有顺序不能乱写)

8、用谷歌调试工具检查css样式

按f12   或者 审查元素

找到html的css样式定位问题

9、选择器(从n多元素中选择某个元素或某类元素)

标签(元素)选择器  :标签名。

id选择器: #id     标签( 元素)的id  。

通配符选择器:* (选择所有的元素)------一般很少使用,使用时也是用来清楚标签默认样式的。

类选择器:   .类名  (点 类名--》申明类样式)     class = '类名' (调用类名)

【类名命名规则:比较长的名称最好用-(横杆) eg:  c-orange 尽量用下划线 ,当然也有和js搭配时使用的类名取的是下划线。

尽量不用下划线一是因为下划线可能有兼容性问题 二是因为js中变量可以可用下划线  所以css中尽量不要下划线

不要用纯数字和纯中文命名,一般命名原则是见名知意】。

多类名 class=“font20 pink fontWeight”

10、id选择器和类选择器最大的区别:

类选择器可以重复多次使用,但id只能使用一次。(界面id的唯一性)

11、伪类选择器

a、链接伪类选择器(主要针对于a标签)

a:link{}

a:visited{}(一般很少用)

a:hover{}

a:active{}(鼠标放上去不松开,一般不用)

b、结构(位置)伪类选择器(css3,有一定的兼容性)

目的:选出第几个孩子

ul>li:first-child{}

ul>li:nth-child(n){}--选所有子元素li

ul>li:nth-child(odd){}   ---选下标(从1开始数)为奇数li

ul>li:nth-child(even){}  --选下标(从1开始数)为奇o u数li

ul>li:nth-child(2n){}    ---选下标为2n的li  (n从0开始)

ul>li:nth-child(2n+1){}    ---选下标为2n+1的li  (n从0开始)

c、目标伪类选择器

:target{color:red}

当前谁被选中(a的锚点)谁字体就是红色

css学习_写法规范、选择器的更多相关文章

  1. CSS学习_属性选择器

    CSS选择器参考 [attribute]——选取带有指定属性的元素: [attribute=value]——选取带有指定属性和值的元素: [attribute~=value]——选取属性值中包含指定词 ...

  2. CSS学习摘要-语法和选择器

    主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(V ...

  3. css学习_css书写规范

    css书写规 1.空格规范: div { color: red; } 2.选择器规范 3.属性 属性定义要另起一行 属性定义后必须以分号结尾 div { color: red; font-size: ...

  4. CSS学习笔记2:选择器

    标签选择器 1.选择要给样式的目标标签,所以叫做标签选择器,也叫元素选择器. 2.给所有相同标签,给相同样式. <!DOCTYPE html> <html lang="en ...

  5. CSS学习笔记3:选择器及优先级

    CSS选择器的类型: 标签选择器 类选择器 ID选择器 全局选择器 群组选择器 后代选择器   1.标签选择器:     以HTML的标签作为选择器,凡是选择了一个标签,那么所有这个标签的内容都是用了 ...

  6. css学习_文本有关的样式属性、sublime快捷生成标签

    1.css中color定义文本的颜色 写法:(最常用的是16进制的) 2.行间距    line-height 3.水平对齐方式   text-align left right  center 4.首 ...

  7. JAVA基础学习_命名规范和注释

    一.命名规范 1. 项目名全部小写 2. 包名统一使用小写,点分隔符之间有且仅有一个自然语义的英语单词,包名统一使用单数形式.如果类名有复数含义,类名可以使用复数形式. 实际应用中: 各层命名规约: ...

  8. css学习_标签的显示模式

    标签的显示模式 a.块级元素(最典型的是  div标签) 特点: 默认宽度  100% 可以容纳块级元素和内联元素 b.行内元素 (最典型的是  span标签) 特点: c.行内块元素(最典型的是 i ...

  9. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

随机推荐

  1. excel随机函数

    =D7+RAND()*(8000-4250) 含义: 1.在D7数值的基础上,随机加一个数值,该数值的随机范围为4250——8000. 2.注意8000和4250要反着写

  2. Matlab如何连接Oracle数据库及基本操作

    语言和语法都是相通的,了解Oracle的连接和处理,对于其他的数据库也是类似的. 一 通过ODBC实现到oracle的连接 )控制面板->管理工具->ODBC数据源->在系统DSN中 ...

  3. easyui-switchbutton js判断是否启动

    <input class="easyui-switchbutton" id="statusId" name="status" onTe ...

  4. 利用jsPDF有效减轻报表型应用服务器的IO负载

    1.利用jsPDF在客户端浏览器上生成pdf文档 使用这种方法可以有效减轻服务器的压力,但是对于国际化,此库任然存在的问题:该库不支持unicode,生成中文文档会乱码,官方也有描述这个问题,详情请参 ...

  5. SNF快速开发平台MVC-甘特图

    上个月做了CS框架的甘特图样例,本月框架组人员又实现了BS的甘特图效果,而且效果也很不错哦 图形框可以直接拖拽调整时长时间: 新增节点:

  6. 处理用千牛导出淘宝数据,供Logstash到Elasticsearch使用。(NodeJS)

    var rf=require("fs"); // 加载编码转换模块 //npm install iconv-lite var iconv = require('iconv-lite ...

  7. RNN,LSTM,GRU简单图解:

    一篇经典的讲解RNN的,大部分网络图都来源于此:http://colah.github.io/posts/2015-08-Understanding-LSTMs/ 每一层每一时刻的输入输出:https ...

  8. 【测量实战技术】Cad中导入坐标高程点并可以提取坐标带高程

    一般咱们都是导入cad的是坐标不带高程,那么怎么在cad中导入坐标高程的三维坐标呢,在不需要cass的情况下还能计算方量呢?而且还能批量提取出这些坐标高程的三维参数. 这些都是工作中非常常用的技能,不 ...

  9. kafka性能测试1.0.0

    kafka提供工具kafka-producer-perf-test.sh用以压测, 参数 说明 messages 生产者发送总的消息数量 message-size 每条消息大小 batch-size ...

  10. WebMisSharp,WebMisCentral,企业框架正则表达式规则共享专版

    ElegantWM.WebUI/Application/common/src/Tools.js 欢迎大家贡献更多的正则验证规则,目前支持如下: /*************************** ...