CSS核心基础

行内式
基本语法格式：

<标记名 style="属性1:属性值; 属性2:属性值; 属性3:属性值;">内容</标记名>

内嵌式
内嵌式是将CSS代码集中写在HTML文档的< head >头部标记中，并且用< style >标记定义。一般位于< title>标记之后。
基本语法格式：

<head>
<style type="text/css">
     选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
 </style>
 </head>

链入式
链入式是将所有的样式放在一个或者多个以.css为扩展名的外部样式表文件中，通过< link />标记将外部样式表文件链接到HTML文档中
基本语法格式：

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

导入式
基本语法格式：

<style type="text/css" >
   @import url(css文件路径);或 @import "css文件路径";
   /* 在此处还可以存放其他css样式*/
</style>

标记选择器
基本语法格式：

 标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是它的缺点，不能设计差异化样式。
类选择器
基本语法格式：

<head>
<style type="text/css">
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
</style>
</head>
<body>
<p class="类名">文本内容</p>
</body>

id选择器
基本语法格式：

<head>
<style type="text/css">
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
</style>
</head>
<body>
<p id="id名">文本内容</p>
</body>

通配符选择器
基本语法格式：

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

实际网页开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，这样反而降低了代码的执行速度。

值	描述
normal	默认值，定义标准的字符
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900（100的整数倍）	定义由细到粗的字符。其中，400等同于normal，700等同于bold，值越大字体越粗

值	描述
normal	默认值，浏览器会显示标准的字体
small-caps	浏览器会显示小型大写字体，即所有的小写字母均会转换为大写。但是，所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

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

使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。其中line-height指的是行高。
如果有不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

color：文本颜色
①预定义颜色的值，如：red、green、blue、等
②十六进制，如：#FF0000、#FF6600、等
③RGB代码，如：红色可表示为rgb(255,0,0)或rgb(100%,0%,0%)
letter-spacing：字间距
允许使用负值，默认为normal
world-spacing：单词间距
单词间距中文字体无效
line-height：行间距
text-transform：文本转换
①none 不转换（默认值）
②capitalize 首字母大写
③uppercase 全部字符转换为大写
④lowercase 全部字符转换为小写
text-decoration：文本装饰
①none 没有装饰（正常文本默认值）
②underline 下划线
③overline 上划线
④line-through 删除线
text-align：文本对齐方式
①left 左对齐
②right 右对齐
③center 居中对齐
text-indent：首行缩进
white-space：空白符处理
①normal常规（默认值）文本中的空格、空行无效，满行（到达区域边界）后自动换行
②pre 预格式化，按文档的书写格式保留空格，空行原样显示
③nowrap 空格空行无效，强制文本不能换行，除非遇到换行标记< br/>。内容超出元素的边界也不换行，若超出浏览器页面会自动增加滚动条

发布了17 篇原创文章 · 获赞 0 · 访问量 582

私信关注

网页设计基础——03 CSS入门