热门关键字:
jquery > jquery教程 > jquery教程 > CSS基础入门学习笔记

CSS基础入门学习笔记

242
作者:管理员
发布时间:2021/3/11 11:28:59
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4172
  CSS概念浏览器前缀CSS验证工具字体样式选择器


  普通选择器复台选择器交集选择器并集选择器后代选择器子元素选择器 伪类选择器


  链接伪类选择器:first-child伪类 块行元素


  块级元素(block-leve1)行内元素(inline-leve1)行内块元素(inline-block) CSS三大特性


  层叠、继承、优先级特殊性(Specificity) 背景


  背景半透明背景渐变 盒子模型


  元素居中外边距合并content宽度和高度盒子阴影 浮动布局


  普通流(normal flow)浮动(float)定位(position)


  元素的定位属性叠放次序(z-index)四种定位总结 元素的显示与隐藏


  display显示visibility可见性overflow溢出溢出的文字隐藏  CSS技巧


  鼠标样式cursor轮廓outline防止拖拽文本域resizevertical-align垂直对齐去除图片底侧空白缝隙 精灵技术


  本质使用制作精灵图滑动]实例 字体图标(iconfont)


  字体引入到HTML第三步:盒子里面添加结构追加新图标 BFC(块级格式化上下文)


  元素的显示模式具有BFC条件的元素元素产生BFC条件BFC元素所具有的特性BFC的主要用途BFC总结优雅降级和渐进增强


  长名称或词组可以使用中横线来为选择器命名。不建议使用“_”下划线来命名CSS选择器。


  外部样式表:


  link 是个单标签


  href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。


  浏览器前缀浏览器-webkit-Google Chrome, Safari, Android Browser-moz-Firefox-o-Opera-ms-Internet Explorer, Edge-khtml-Konqueror


  CssStats 在线的 CSS 代码分析


  W3C 统一验证工具:


  chiaz.com站长工具


  Unicode字体


  在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。可以使用英文来替代。 比如 font-family:“Microsoft Yahei”。


  在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。可以通过escape() 来测试属于什么字体。


  字体名称英文名称Unicode 编码宋体SimSun\5B8B\4F53新宋体NSimSun\65B0\5B8B\4F53黑体SimHei\9ED1\4F53微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312隶书LiSu\96B6\4E66幼园YouYuan\5E7C\5706华文细黑STXihei\534E\6587\7EC6\9ED1细明体MingLiU\7EC6\660E\4F53新细明体PMingLiU\65B0\7EC6\660E\4F53


  font-weight:字体粗细


  字体加粗除了用 b 和 strong 标签之外,可以使用CSS 来实现


  font-weight属性用于定义字体的粗细,其可用属性值:normal(400)、bold(700)、bolder、lighter、100——900(100的整数倍)。


  font : 综合设置字体样式


  使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。


  注意:其中不需要设置的属性可以省略(取默认值),但必须保留和属性,否则font属性将不起作用。


  普通选择器


  类选择器(class):是可以多次重复使用的


  id选择器:不得重复。


  复合选择器


  交集选择器


  交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格 h3.special


  并集选择器


  并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器都可以作为并集选择器的一部分。可以利用并集选择器为它们定义相同的CSS样式。


  后代选择器


  后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。


  注意:子孙后代都可以这么选择。 或者说它能选择任何包含在内的标签。


  子元素选择器


  子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接,注意,符号左右两侧各保留一个空格。


  注意:这里的子指的是亲儿子不包含孙子、重孙子之类。


  伪类选择器


  链接伪类选择器


  :link :visited :hover :active


  注意:1. 按照 lvha 的顺序, love hate 2. 伪类名称对大小写不敏感。


  :first-child 伪类


  向元素的第一个子元素添加样式。


  p:first-child


  匹配作为任何元素的第一个子元素的 p 元素 p > i:first-child


  匹配所有元素中的第一个 元素 p:first-child i


  匹配所有作为第一个子元素的 元素中的所有元素


  参考文档


  标签显示模式转换 display


  块转行内:display:inline;


  行内转块:display:block;


  块、行内元素转换为行内块: display: inline-block;


  块级元素(block-level)


  每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。


  常见的块元素有、、、、、等,其中标签是最典型的块元素。


  行内元素(inline-level)


  行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。


  常见的行内元素有、、、、、、、、、等,其中标签最典型的行内元素。


  行内元素的特点:


  (1)和相邻行内元素在一行上。


  (2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。


  (3)默认宽度就是它本身内容的宽度。


  (4)行内元素只能容纳文本或则其他行内元素。(a特殊)




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐