CSS
坑军之王
174
级联样式单(CSS),又称层叠样式单,主要用于网页风格设计,包括字体大小、颜色及元素的精准定位。
CSS样式使用方法:
内嵌式:将CSS代码放入HTML文件的头文件处进行实现,内容由< style>< /style>进行定义生成。
外链式:将CSS代码在额外的CSS文件中编写,再将CSS文件与HTML文件利用link
行内式:将CSS代码在想设计的标签,使用style进行引用
< link > rel="stylesheet" 必须选择,否则样式表文件中CSS样式不会生效
选择器
选择器是CSS代码中的核心内容,在使用CSS对HTML文件进行样式编写之前,需要通过选择器定位到对应的标签。(行内式除外)以下使用表格的形式进行CSS选择器的使用说明。
页面不重用的话怎么写都无所谓,效果到了就行
名称 |
使用展示 |
说明 |
元素选择器 |
标签名{} |
元素选择器是最简单的选择器,选择元素标签即可,在{}内进行对应元素的CSS样式编写。 |
类选择器 |
.类名{} |
定位所选择的类名的标签,在{}内部进行CSS样式的编写。 |
id选择器 |
#id名{} |
定位所选择id的标签,在{}内部进行CSS样式的编写。 |
属性选择器 |
E[属性值=XX] |
元素选择器算是属性选择器的特例,使用展示中算是选择存在某属性值为XX的E元素 |
以下属性为CSS3新增的属性选择器 |
||
E[属性值^=XX] |
选择指定属性值开头为XX内容的E元素 |
|
E[属性值$=XX] |
选择指定属性值结尾为XX内容的E元素 |
|
E[属性值*=XX] |
选择指定属性值包含XX内容的E元素 |
|
包含选择器 |
选择器A 选择器B |
选择A元素内的B元素 |
子选择器 |
选择器A>选择器B |
选择A元素内的B元素 |
兄弟选择器 |
选择器A~选择器B |
满足选择器A对应元素之后满足选择器B的元素 |
选择器叠加 |
选择器A ,选择器B,……,选择器N |
多个选择器共用属性 |
文字CSS
属性 |
说明 |
font-style |
文字样式 |
font-variant |
把段落设置为小型大写字母字体 |
font-weight |
字体粗体 |
font-size |
字体大小 |
font-family |
字体 |
line-height |
行高 |
font-weight以数值调整的时候因为浏览器原因可能不会实现
属性类别 |
说明 |
英文单词 |
单词对应的图像 |
rgb() |
在括号内填入三原色进行颜色的调整 |
rgba() |
以三原色调整属性,最后一个是透明度 |
# xxxxxx |
以十六进制进行颜色调整 |
hls |
色相、亮度、饱和度 |
重点:
属性 |
说明 |
color |
阴影颜色 |
xoffset |
阴影横向偏移 |
yoffset |
阴影纵向偏移 |
radius |
阴影模糊半径 |
如果是想多个阴影的话,在不同阴影设置之间以逗号隔开
margin和padding相比,尽量使用padding,否则部分页面可能会出现页面错乱