css字体样式，选择器，外观属性

最新推荐文章于 2024-11-04 07:45:03 发布

清风挽心ii

最新推荐文章于 2024-11-04 07:45:03 发布

阅读量226

点赞数

分类专栏：学习总结文章标签： css

本文链接：https://blog.csdn.net/Liuxin2448/article/details/115356090

版权

学习总结专栏收录该内容

69 篇文章 0 订阅

订阅专栏

字体样式

ont-size:字号大小

font-size属性设置字号该属性的值可以使用相对长度单位也可以使用绝对长度单位其中相对长度单位比较常用推荐使用px像素单位

font-family:字体

font-family属性用于设置字体常用的字体有宋体、微软雅黑、黑体等

p{font-family:“微软雅黑”;}

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

常用技巧：

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

css unicode 字体

在css中设置字体名称，直接写中文是可以的。但是在文件编码不匹配是会产生乱码的错误。

方案一：你可以使用英文来代替。比如font-family:“Microsoft Yahei”.

方案二：可以使用Unicode编码来写字体名称来避免这些错误

以后尽量只写Unicode字体写宋体和微软雅黑 “\5FAE\8F6F\96C5\9ED1”,"\5B8B\4F53"

font-weight：字体粗细

字体加粗出了用b和Strong标签之外，可以使用css来实现，但是css是没有语义的。

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100-900(100的整数倍)

数字400等价于 normal，而700等价于bold。

font-style:字体风格

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

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

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

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

font:综合设置字体的样式(重点)

font属性英语对字体样式进行综合设置，其根本语法如下：

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

使用font属性时，必须按上面的语法格式中的顺序书写，不能更换顺序，各个属性以空隔开
其中不需要设置的属性可以省略，但是必须保留font-size和font-family属性，否则font属性将不起作用

css注释

/* */

选择器

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

标签选择器

标签选择器是指用HTML标签名称作为选择器，按照标签名称分类，为页面中某一类标签指定统一的css样式

标签名{属性1：属性值1；属性2：属性值2} 或者
元素名{属性1：属性值1；属性2：属性值2}

标签选择器最大的优点是能快速为页面中的标签统一样式，但是不能设计差异化样式

类选择器

类选择器使用"."进行标识，后面紧跟类名

.类名（属性1：属性值1；属性2：属性值2）

标签调用时用class="类名"即可。

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

1.长名称或词组可以使用中横线来为选择器命名
2.不建议使用"_"来命名css选择器

浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）

能良好区分JavaScript变量名(JS变量命名是用"_")

3.不要纯数字、中文等命名，尽量使用英文字母来表示

id选择器

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

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜

id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

id选择器和类选择器最大的不同在于使用次数上。

通配符选择器

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

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

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

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

为了和我们刚才学的类选择器相区别，  类选择器是一个点 比如 .demo {}   而我们的伪类 用 2个点 就是 冒号  比如  :link{}

链接伪类选择器

:link /* 未访问的链接 */
:visited /* 已访问的链接已经点击过的状态*/
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接点击不松开的时候显示的状态 */

注意写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序。 love hate 爱上了讨厌记忆法

a {   /* a是标签选择器  所有的链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
		}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */

CSS外观属性

color:文本颜色

color属性用于定义文本的颜色，其取值方式有如下3种：

1.预定义的颜色值，如red，green，blue等。

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

3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

line-height:行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7.8像素左右就可以了。

text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐

text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度

letter-spacing:字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing:单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。

CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

用的相对来说比较少，不太建议使用。

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

白话：这里的子指的是亲儿子不包含孙子重孙子之类。

 比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

属性选择器

E[attr] 存在attr属性即可
E[attr=val] 属性值完全等于val
E[attr*=val] 属性值里包含val字符并且在“任意”位置
E[attr^=val 属性值里包含val字符并且在“开始”位置
E[attr$=val] 属性值里包含val字符并且在“结束”位置

/* 获取到 拥有 该属性的元素 */
li[type] {
  border: 1px solid gray;
}
/* 获取 属性等于某个值的 元素 属性值 可以使用 引号进行包裹 */
li[type="vegetable"] {
  background-color: green;
}
/* 使用空格分隔的 多个属性 其中有某个属性即可获取 */
li[type~="hot"] {
  font-size: 40px;
}
/* 获取以某个属性开头的语法  */
li[color^='green'] {
  background-color: orange;
}
/* 获取以某个值 结尾的属性 */
li[type$='t']{
  color: hotpink;
  font-weight: 900;
}

/* 获取 属性中 拥有某个值的 元素 */
li[type*=ea] {
  font-size: 100px;
}
/*  如果属性的值 只有very 也能够获取  用来获取 多个属性 并且 使用-连接 */
li[price|='very'] {
  background-color: darkred;
}

<ul>
  <li type='fruit' color='green'>西瓜</li>
  <li type='vegetable' color='greenyellow'>西兰花</li>
  <li type='meat'>牛肉</li>
  <li type='meat hot'>猪肉</li>
  <li type='drink hot'>可乐</li>
  <li type='drink hot'>雪碧</li>
  <li price='very-cheap'>红酒</li>
  <li price='very'>白酒</li>
</ul>