CSS样式和属性

CSS样式

css样式分为三种:内部样式、行内式(内联样式)、外部样式(外链式)

  • 内部样式:

css样式放在head内

  • 行内式(内联样式):

css样式放在标签内

  • 外部样式(外链式):

新建一个css样式文件,如图

在head里输入link再按下Tab键链接外部的css样式

CSS选择器

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

语法:标签名{属性1:属性值1; 属性2:属性值2;… 属性n:属性值n;} 或

元素名{属性1:属性值1; 属性2:属性值2;… 属性n:属性值n;} 

 

②类选择器

语法:.类名{属性1:属性值1; 属性2:属性值2;… 属性n:属性值n;}  注意:类名前面要加个英文的点号

③多类名选择器

语法:<标签名 class=“类名1 类名2 ..."></标签名>  注意:类名1和类名2有空格隔开,且二者为不同的类

 

css样式显示效果跟html元素中的类名先后顺序无关,受css样式书写的上下顺序有关

④id选择器

语法:#id名{属性1:属性值1; 属性2:属性值2;… 属性n:属性值n;}  注意:id名前面的#不能漏掉,且id选择器不允许重复只能使用一次

⑤通配符选择器

匹配页面的所有元素

css样式属性

font-size: 字号大小,常用单位为em或px,一般我们使用px为多
font-family: 字体样式(宋体,微软雅黑等)
font-weight: bold; 字体加粗 也可以写成 font-weight:700;
font-weight: normal; 正常字体 也可以写成 font-weight:400;
font-weight: bolder; 特粗体
font-weight: lighter; 字体变细
font-style: 字体风格
font-style: normal 正常
font-style: italic 斜体
font-style: oblique 倾斜

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

语法顺序是固定的,用空格隔开

用法:例:h1{font: 400 16px "宋体"}

css外观属性

color: 文本颜色
line-height: 行间距 单位为 px、em、%
text-align: 内容水平对齐方式 left、right、center
text-indent: 2em  段落首行缩进两个汉字(1em表示1个汉字)
text-decoration: 文本的装饰
    text-decoration: none; 默认无装饰效果
    text-decoration: underline; 下划线,一般在a链接使用
    text-decoration: overline; 定义文本上的一条线,上划线
    text-decoration: line-through; 穿过文本的一条线,删除线

明日接下去更新

猜你喜欢

转载自www.cnblogs.com/ld-xiaoluohao/p/11210846.html