• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > css权威指南--笔记(必看)

css权威指南--笔记(必看)

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css等相关知识,佚名 希望在学习及工作中可以帮助到您

第1章 css和文档

1,元素:替换元素(img input),非替换元素(大多数span)。

2,link:rel(代表关系:stylesheet,候选样式表:alternate stylesheet);type(text/css);media:(all(所有表现媒体, screen,print),title(配合候选使用)。

3,@import url(sheet1.css) 需在style内使用,放在其他css规则之前。

4,向后可访问性:<style><!-- 样式 --></style>,这样较老浏览器会将style忽略,能理解css的浏览器能正常读取样式表。

5,css注释:/* */。

第2章 选择器

1,对声明分组时,一定要在各个声明的最后使用分号。

2,p.warming.help {background:red;} 只匹配class包含warming和help的p元素,如果p包含warming和其他的则不能匹配。

3,实际上,浏览器并不检查html中id的唯一性,但这会导致编写dom更困难。

4,属性选择器:h1[class] {...}

 h1[class=''] {...}完全匹配

 h1[class~=''] {...}部分匹配 [class^='']以什么开头 [class$='']以什么结尾 [class*='']包含什么的所有元素

 *[lang|='en']特定属性选择器,会选择lang属性等于en或以en-开头的所有元素。

5,选择子元素:h1>strong;选择相邻兄弟元素h1+p(h1和p有共同父元素,最终选择p)。

6,链接伪类:未访问链接:link,访问过链接:visited(它们都是静态的),等同于<body link='' vlink=''>。

 动态伪类:焦点:focus,鼠标停留:hover,激活:active。(动态伪类可以用于任何元素)

 建议伪类顺序:link-visited-focus-hover-active。

 选择第一个子元素(:first-child),很容易误解,是所有第一个子元素(在下面例子中,作为第一个子元素的元素包括第一个p,第一个li和strong及em)。

  1. <div>  
  2.     <p>helooo</p>  
  3.     <ul>  
  4.         <li>111</li>  
  5.         <li><strong>222</strong></li>  
  6.     </ul>  
  7.     <p>  
  8.         <em>333</em>  
  9.     </p>  
  10. </div>  

根据语言选择(:lang()),如*:lang(fr){color:red;} 这是将所有法语元素变成红色。

伪元素选择器:首字母:first-letter,用户代理动态构成假象元素<p:first-letter>;

第一行:first-line;

之前和之后:before :after。

以上这篇css权威指南--笔记(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持微课江湖。

您可能想查找下面的文章:

相关文章

  • 2017-08-06通过CSS样式来修改ExtJS:TreePanel的小图标
  • 2017-08-06CSS样式去除input和textarea点击选中框
  • 2017-08-06IE6盒子模型没问题 详测双倍边距
  • 2017-08-06CSS3动画:5种预载动画效果实例
  • 2017-08-06使用CSS3制作响应式导航菜单的方法
  • 2017-08-06网站模板制作中的详情页面的设计方法(图文教程)
  • 2017-08-06ie6下a标签的onclick事件不执行问题解决方案
  • 2017-08-06CSS设置未知大小图片在已知大小容器水平垂直居中
  • 2017-08-06IE系列不支持CSS的圆角border-radius等属性的解决方案
  • 2017-08-06css 浮动(float)页面布局

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • position:fixed或absolute时百分比参考屏幕宽度
    • 完美解决IE兼容模式问题(使IE使用固定的渲染模式)
    • div+css用边框实现圆角矩形(多样式)
    • 表单元素与提示文字无法对齐的解决方法(input,checkbox文字对齐)
    • CSS样式定义的优先级顺序介绍
    • 关于box-sizing的全面理解
    • 巧用CSS边框 制作技能冷却效果
    • css float 解析学习
    • css背景色透明 内容不透明的解决方法(兼容所有浏览器)
    • CSS的样式合并与模块化提高代码执行效率

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有