黑马程序员技术交流社区

标题: css相关技术 [打印本页]

作者: 自律即自由i 时间: 2019-4-19 00:12
标题: css相关技术
  做一个简单的静态网页，就是html加css组合而成，我想html就是简单用div、ul、li、等标签布局，就像搭房子一样，把砖头一块一块的砌好，div盒子就是砖块，而要造好一座漂亮的房子，就离不开我们的css样式技术，接下来我就给大家了解一下css的美丽之处。
Css作用
Css就是层叠样式表
作用：进行页面的版面布局和外观样式的美化
通过css书写代码能够将结构html和样式css分离书写，简化代码，提高可阅读性；
Css引入方式（书写位置）
Css的引入方式分为3种：行内式，内部样式（内联样式），外部样式
行内式
将样式用style属性添加给标签，在标签的开始标签身上，就是在开始标签身上敲空格，然后将style当做属性添加，style后面的双引号里面书写css语法：属性:属性值；
语法：<div style=”属性1:属性值1；属性2:属性值2；…… ”></div>
注意：由于行内式没有实现结构和样式的分离，文件的可读性差，不建议大量使用；
内部样式（内联样式）
书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离；因为style只是html的一个标签；
内部样式只能对当前的页面起作用；

Css外部连接
操作
01 新建一个.css文件，放在项目下面的css文件夹里面；
02 单标签link标签配合自己的3属性书写在head标签里面：
rel  关系告诉浏览器当前引入的文件和html是样式表的关系
type 类型告诉浏览器当前引入的是css文件类型
href  路径告诉浏览器去这个路径找到我们的css文件
<link rel="stylesheet" type="text/css" href="css/style.css">

外部链接的优点
01可以将页面样式一致的写一个样式列表，然后直接用link配合3属性进行调用，能够更好的管理页面；
02 实现了样式和结构的完全分离，我们经常使用的一种方法；
Css样式的书写格式
选择器 { 属性1:属性值1;  属性2:属性值2; 属性3:属性值3；…… }
选择器：指定CSS样式作用的HTML对象（要更改样式的标签），花括号内是对该对象设置的具体样式。
属性和属性值：以键值对的形式出现，属性和属性值之间用英文的冒号 ’  :  ’ 链接；；
Css注释 /*注释内容*/
所有的注释都是提高代码的可读性，浏览器是不给解析的，写给我们自己看的；
Html的注释<!- - 注释内容 -->
CSS样式规则（键值对规则）
第一步确定给谁加样式 ---- 选择器
第二部书写  {}
第三步在{}里面书写css键值对规则 {属性1:属性值1；属性2:属性值2；}

Css选择器
简介
Css选择器可以分为：基础选择器和高级选择器（复合选择器）；
         基础选择器：标签选择器、类选择器、id选择器
高级选择器（复合选择器）：后代选择器、指定标签选择器、并集选择器
选择器的作用
选择标签的，把想要选择的元素标签选择出来。
标签选择器
以标签名称命名的选择器，可以把将页面中所有的同类元素（该标签）全部选中；
标签选择器在实际开发中不建议使用；
类选择器
类选择器使用有一个过程：
  01 定义：在css里面用点“  .  ” +  类名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用；

类选择器的命名规则：
不能用纯数字、不能数字开头的、不可以中文命名、可以用数字结束；

类名称可以重复出现使用，前提条件是：两个盒子的样式完全一致的，就和人的名字一样是可以重复de；
一个class调用多个类名
一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可；
   例如：<div class=“red  font100”>一个元素调用多个类名</div>
多类名调用可以解决统一修改某一个属性，还可以简化代码
Id选择器
id选择器使用有一个过程：
01 定义：在css里面用 “  #  ” +  id名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格id=“id称”进行调用；
id选择器的命名规则：
不能用纯数字、不能数字开头的、不可以中文命名、可以用数字结束；
类选择器和id选择器的区别：姓名和身份证号的区别
类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；
通配符选择器 *
一个 * 号表示选中了所有的标签（包括了咱们学过的和咩有学过的w3c规定的标签）
*{
margin:0;
padding:0;
}
以上代码表示所有的标签默认的margin设置为0，padding设置为0；

常见的文字控制属性
颜色    color
文字大小font-size（强制记忆）
font-size 取值单位是px和em，px常用，em表示一个字的大小；
一般情况下浏览器默认的文字大小是不一致的，所以我一开始就需要将整体的body的font-size设置为固定的大小统一浏览器的显示，按项目需求一般是12px、14px、16px之间；
文字字体font-family（强制记忆）
font-family取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；
如果是汉语的文字或者特殊符号和有空格隔开的英文，要用英文状态的引号引起来；
font-family:Arial,”Microsoft Yahei”，“微软雅黑”,”黑体”；
常用的unicode字体写法（了解）

字体加粗样式font-weight（强制记忆）
加粗
font-weight:bold;    font-weight:700;
不加粗
font-weight:normal;    font-weight:400;
字体风格font-style （强制记忆）
改变字体默认的显示风格，倾斜和不倾斜
•倾斜：font-style:italic;
•不倾斜：font-style:normal;
实际开发中我们会用em或者i标签装小文字默认是倾斜的，我们用不倾斜来让文字扶正；
字体综合写法font（大重点强制记忆）
font：是否倾斜是否加粗文字大小/ 行高字体；
font：font-style font-weight font-size/line-height font-family;
注意:使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的；
实际工作中一般只用：font:文字大小字体；
文字颜色 color
a、直接写英文单词yellow red等等
b、16进制表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgb（）如rgba（0,0,0,0.5）a为透明度

常用测试颜色16进制：
黑色系列：#000； #333；  #666； #9999；
灰色系列：#ccc； #eee； #ddd； #dedede；
红色：#f00；
文字居中显示text-align（强制记忆）
取值：left right center
text-align:center; 表示让盒子里面的文本居中显示，文本必须有父级；
文本行高line-height（强制记忆）
line-height设置两行文字之间的距离；
量取行高的方法
如果有psd源文件可以直接去字符面板索取

首行缩进text-indent（强制记忆）
text-indent首航缩进，取值为具体的像素值或者直接em，1em等于一个字的大小，取值可以是正值也可是负值；
文本装饰text-decoration （强制记忆）
text-decoration:none;没有线  ---- 取消超链接a默认的下划线
text-decoration：underline；下划线 --- 给需要加下划线的文字加下划线
text-decoration:line-through; 中划线/删除线
text-decoration:overline;上划线

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

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