css初学笔记（一）

最新推荐文章于 2024-04-03 06:21:23 发布

小白爱码

最新推荐文章于 2024-04-03 06:21:23 发布

阅读量279

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_42227428/article/details/80359516

版权

 
 1、行内样式（内联样式）【优点:书写方便，权重高。缺点：没有实现样式和结构分离。使用情况较少，控制一个标签（少。】 

  内联样式，简称内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，基本语法格式为： 

 
 <标签名 style=“属性1；属性2；……”>设置的样式内容</标签名> 

 
 语法中的style是标签的属性，实际上任何html都有style属性，用来设置行内式，其中属性和值的书写规范，行内式只对其所在的标签及嵌套在其中的子标签其作用。 

 
 2、内部样式表【优点：部分结构和样式分离。缺点：没有彻底分离。控制一个页面（中】 

  内嵌式是将CSS代码集中在html文档的head头部标签中，并且用style标签定义，其基本语法格式如下： 

  <head> 

  <style type="text/css"> 

  选择器 {color：red；属性1；属性2；属性3……；} 

  </style> 

  </head> 

  语法中style标签一般位于head标签中title标签之后，也可以把他们放在html文档的任何地方，但是这样不够严谨。type="text/css"在html5中可以省略，写上也是符合规范，写不写无所谓。 

 
 3、外部样式表【优点：完全实现结构和样式分离。缺点：需要引入。使用最多，强烈推荐。控制整个站点（多】 

  外链样式是将所有的css样式放在一个或者多个以css后缀命名的文件中，通过link标签将css样式表文件链接到html文件中，基本语法是： 

  <head> 

  <link rel="stylesheet" type="text/css" href="css文件路径" /> 

  </head> 

  注意：link是个单标签，语法中link标签需要放在head头部标签中，并且必须制定link标签的三个属性，具体如下： 

  href：定义所连接外部样式表的url，可以是相对路径，也可以是绝对路径。 

  type：定义所连接文档的类型，在这里需要制定为text/css，表示链接的外部文件css样式表。 

  rel：定位当前文档与被链接文档的关系，在这里需要制定为stylesheet，表示被链接的文档是一个样式表文件。 

 
 4、css选择器 

  ①、标签选择器：可以把html中某一类标签全部选中，指定统一的css样式。基本语法： 

  标签名 {属性：属性值；属性：属性值；……} 

  ②、类选择器：类选择器使用点符号“.”进行表示，后面紧跟类名，不要纯数字或者纯中文命名，比如 
 “.leiming”，可以选一个或多个标签。 

  语法格式：.类名{属性1：属性值；属性2：属性值；……} 

  标签调用的时候，在标签类用class=“类名”即可。 

  ③、多类名选择器：我们可以给一个标签指定多个类名，从而达到更多css样式的目的。各个类名中间用空格隔开，多类名选择器在后期布局比较复杂的情况下，还是比较多使用的。语法例子： 

  <div class="pink" "font20px">程方园</div> 

  ④、id选择器：id选择器用“#”号代替类名选择器的点，#号后面紧跟id名。语法与类名选择器一样，唯一不同的是id选择器是唯一性的，只能用一次。类名选择器可以使用多次。 

  ⑤、通配符选择器：通配符选择器用*号表示，他是所有选择器中使用范围最广的，能匹配页面中所有表情元素，基本语法是*{属性：属性值……}，通配符选择器基本使用很少。 

 
 5、css字体样式属性 

 
 ①、font-family： 

  1）用于设置字体类型，网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本字体设置为微软雅黑，可以使用css样式代码P{font-family：“微软雅黑”；} 

  2）可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，就会尝试用下一个字体，直到找到合适的字体。 

  3）常用技巧： 

  A、网页中普遍使用14px+的字体大小。 

  B、尽量使用偶数数字字号，ie6等老师浏览器支持奇数会有bug。 

  C、各种字体间必须用英文状态下的逗号隔开。 

  D、中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。 

  E、如果字体中包含空格、#、￥等符号，该字体必须要英文状态下的单引号或者双引号，例如font-family：“times news Roman”；。 

  F、尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。 

  宋体：simsun；新宋体：nsimsun；黑体：sinhei；微软雅黑：Microsoft yahei；隶书：lisu；幼圆：youyuan；华文细黑：stxihei； 

 
 ②、font-weight字体粗细 

  字体加粗除了用B和strong标.签外，还可以用css来实现，但是css是没有语义的。font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100-900。 

  小技巧：数字400等价于normal字体粗细，700等价于bold字体粗细。一般我们多用于数字来表示。 

  语法：font-weight：normal（正常的字体相当于number400号），bold（粗体相当于number700号），bolder（IE5+特粗体），lighter（IE5+细体），number（IE5+100、200、300、400、500、600、700、800、900） 

 
 ③、font-style字体风格 

  字体倾斜除了用i和em标签之外，还可以用css来实现，但css是没有语义的。 

  font-style属性用于定义字体风格，比如设置斜体、倾斜或者正常字体。 

  属性值有：normal默认标准字体；italic：斜体字体；oblique：倾斜字体； 

  小技巧：我们平时很少给文字加斜体，反而喜欢给斜体标签（em、i）改为普通模式。 

 
 ④、color文本颜色 

  定义文本的颜色，取值方式以下三种： 

  A、预定义颜色值，如red、green、blue等。 

  B、十六进制，如#FF0000、#FF6600、#29D794。实际工作中，十六进制最常用的定义颜色的方式。 

  C、RGB代码，红色可以代表为rgb（255,0,0）或者rgb（100%，0%，0%） 

 
 ⑤、line-height行间距 

  用于设置行间距，设置属性值有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。 

 
 ⑥、text-align水平对齐方式 

  属性值有left、right、center。 

 
 ⑦、text-indent首行缩进 

  设置文本首行的缩进，属性值有不同单位的数值、em字符宽度的倍数、相对留恋其窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。1em就是一个字的宽度，如果汉字的段落，1em就是一个汉字的宽度。 

 
 ⑧、text-decration文本的装饰，用于装修文本效果 

 
 none : 　无装饰 

 
 blink : 　闪烁（基本不会用） 

 
 underline : 　下划线 

 
 line-through : 　贯穿线 

 
 overline : 　上划线 

 
 总结文本格式化标签样式 

 
 ①、em和i倾斜【取消倾斜：font-style：normal；添加倾斜：font-style：italic；】 

 
 ②、strong和b【取消加粗：font-weight：normal或者400；添加加粗：font-weight：bold或者700】 

关注