黑马程序员技术交流社区

标题: 技术贴——css基础 [打印本页]

作者: WMC1996 时间: 2019-6-9 21:34
标题: 技术贴——css基础
自己学习css的时间还很短，只是整理了一些笔记和自己的心得
Css属性书写语法

属性：属性值；这其实对于初学者来说很重要，因为是新手的问题往往很容易书写错误，检查了很长时间最后发现是自己的书写不规范或者标点符号问题导致的，那感觉真是没谁了。。

直接在标签的开始标签身上添加一个 style=“”属性，然后在引号里面书写css属性和属性值即可、。

注意：行内样式没有实现结构和样式分离，尽量不用：

例如：<div style=“color:pink; font-size:16px;”>我是行内样式</div>;

如果有一个两个样式需要更改，其他的东西很多的情况下，是可以用一下之下书写样式的这样相对来说权重也会高一些

Css选择器的分类

Css选择器分为两类：基础选择器和高级选择器（复合选择器）

基础选择器：标签选择器（html选择器）、类选择器、ID选择器

复合选择器：后代选择器、并集选择器、指定标签选择器

类选择器（重点）类选择器定义类选择器使用有一个过程：
01 定义：在css里面用点“  .  ” +  类名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用；
类选择器的命名规则：不能用纯数字、数字开头的、中文命名；
但是可以用数字结束。
类选择器特殊用法（多类名）一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可；
例如：<div class=“red  font100”>一个元素调用多个类名</div>
ID选择器（了解）id选择器的定义使用id选择器使用有一个过程：
01 定义：在css里面用 “  #  ” +  id名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格id=“id名称”进行调用；
id选择器的命名规则：不能用纯数字、数字开头的、中文命名；
类选择器和id选择器的区别：类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；
通配符选择器*一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用；
*{
margin:0;
padding:0;
}
以上代码表示清空所有的默认边距；

1、复合选择器复合选择器就是把基础选择器组合起来使用
后代选择器（重点工作中常使用）子元素选择器
交集选择器（指定标签选择器）（了解）
并集选择器（重点）

需要根据情况来决定用什么样的选择器

链接的伪类四种状态：    a:link       未访问的链接（访问前）
   a:visited 已访问的链接（访问后）
   a:hover    鼠标移动到连接上（鼠标经过）
   a:active    选定的链接（按下鼠标的时候）
其中hover用的最多，最常见  也要熟练掌握

3、标签显示模式（重点要理解）实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：
块级元素：自己独占一行； --- 代表标签 div、h标签
   行内元素：一行可以共存多个；--- 代表标签  span 、a
   行内块元素：一行可以共存多个； --- 代表标签 img 、 input
此处非常重要，布局的时候弄不清元素的样式就会出现很大问题。要了解并且熟练转换

4、实体化三属性（重要滴很）宽 width
高 height
背景 background
注意：这三个属性属于我们布局的中流砥柱，只要这三个值设置好了，我们书写的网页就很少出现兼容问题；

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2