【CSS3 基础】全面入门学习

内容持续补充~~~

文章目录

  • 字体样式属性
    • font-size:字号大小
    • “>p{ font-family:“微软雅黑”;}

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

      常用技巧:

      1. 现在网页中普遍使用14px+。
      2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
      3. 各种字体之间必须使用英文状态下的逗号隔开。
      4. 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
      5. 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如。
      6. 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

      CSS Unicode字体

      在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

      方案一: 你可以使用英文来替代。 比如 “>font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。

      注意:
      数字 400 等价于 normal,而 700 等价于 bold。 但是我们更喜欢用数字来表示。

      font-style:字体风格

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

      font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:

      normal:默认值,浏览器会显示标准的字体样式。

      italic:浏览器会显示斜体的字体样式。

      oblique:浏览器会显示倾斜的字体样式。

      注意:
      平时我们很少给文字加斜体,反而喜欢给斜体标签(em,i)改为普通模式。

      font:综合设置字体样式

      font属性用于对字体样式进行综合设置,其基本语法格式如下:

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

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

      选择器

      要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。

      标签选择器(元素选择器)

      标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:

      标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。

      类选择器

      类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:

      类选择器最大的优势是可以为元素对象定义单独或相同的样式。

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

      1. 输入的时候可能会少按一个shift键;
      2. 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
      1. 能良好区分JavaScript变量命名(JS变量命名是用“_”)

      结果:

      【CSS3 基础】全面入门学习
      注意:
      1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
      2. 各个类名中间用空格隔开。

      多类名选择器在后期布局比较复杂的情况下,还是较多使用的。

      id选择器

      id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:

      该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。

      用法基本和类选择器相同。

      通配符选择器

      通配符选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:

      例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。

      来源:沉晓

      声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2019年5月1日
下一篇 2019年5月1日

相关推荐