2018.10.23 晚上 css学习1

下划线标签:<U> www.baidu.com </ U>。

一些以前不知道没用过的进行总结一下:

 <style> h2 {font-family:“宋体”} <./ style> //这样输出的被h2包裹的字体就是宋体啦

常用的小技巧:

  1.现在网页中普遍使用14px的

  2.尽量使用偶数的数字作为字号,IE6等老式播放器支持奇数会有错误

  3.中文字体需要加引号,英文字体一般不需要加字体,当要设置英文字体的时候,必须放在中文字体之前

  4.各种字体之间使用逗号进行隔开

  5.如果字体中包含空格#$等特殊字符,则该字体必须加英文状态下的单引号或者双引号

  6.尽量使用默认字体,保证在任何用户的浏览器都能正确的展示

Unicode字体(兼容性很好)尽量写宋体微软雅黑

在html中我们使用b strong标签来使得字体变粗,在css中则使用font-weight来改变字体的粗细

  使用方式:font-weight:100 | 200 | 300 | 400(普通)| 500 | 600 | 700(粗体)| 800 | 900 //最多到九百

在html中我们使用我的标签来让字体倾斜,在css中使用font-style:italic让字体倾斜

  font-style:normal(正常)italic(倾斜)

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

  {font:font-style font-weight font-size / line-height font-family;}

  //注意顺序不能调换否则就没有效果其中不需要的属性可以省略(取默认值)但是必须保留font-size和font-family属性,否则属性将不起作用。

选择器的使用:

  标签选择器:(注意只能选择HTML里面存在的标签)页面中同一标签里面的内容样式的可以快速更改

  1.类选择器:可以单独更改某个个标签内容里面的样式class =“类名”

    在进行定义属性的时候。类名{font-style:italic ....}

   2. id选择器:id =“big”在定义样式的时候这样使用#big {font-style:italic ....}

  3.通配符选择器:* {color:pink} //其中*代表所有的选择器

***类选择器可以多次调用进行使用,而ID选择器只能调用一次***

css类选择器的常见的命名规范:尽量见名之意

伪类选择器

  伪类选择器就是用于向某些选择器添加特殊的效果,比如说鼠标移动过去就会变颜色

  :link {} //为访问的链接

  :visited {} //已经访问的链接我们已经点击过一次的状态

  :hover {} //鼠标移动上去的链接的状态

  :active {} //鼠标按住不放的状态

  速记方法:LVHA

  在实际工作中我们一般只是用a:hover {} //进行使用就好了

结构伪类选择器(CSS3还有浏览器不兼容):

  li:first-child {color:green} //父元素的第一个子元素就可以进行设置其样式

  li:last-child {color:green} //父元素的最后一个子元素就可以进行设置其样式

  li:nth-​​child(4){color:skyblue} //可以任意选择一个子元素为其改变样式n从0开始的2n为偶数2n + 1为奇数

  li:nth-​​child(even){color:skyblue} //为偶数行的子元素改变样式

  li:nth-​​child(odd){color:skyblue} //为奇数行的子元素改变样式

  li:nth-​​last-child(n){color:skyblue} //是从下面往上开始数

目标伪类选择器:

  :目标{颜色:红;字体大小:20像素}

行高对齐以及缩进

  line-height:18px //设置行高在实际工作中一般使用px来进行,一般情况下比字号大7或者8像素即可

  text-align:center //设置对其方式此外还有左左对齐右右对齐的对齐方式

  text-indent:2em //首行缩进//简易使用em为单位1em就是一个汉字的宽度

  字母间距:2px; //控制字间距只对中文有效

  字间距:10px的; //控制单词间距只对英文单词有效中文无效

设置颜色半透明状态(css3):h1 {color:rgba(0,0,0,0.2)} //第四个数为0.2表示透明度为0.2

设置文字阴影(css3):text-shadow:5px 11px 3px rgba(0,0,0,0.5); //水平位置垂直位置(水平位置和垂直位置必须写)模糊距离阴影颜色

猜你喜欢

转载自blog.csdn.net/HANGSOME123/article/details/83314311