CSS基础

目录

加载css文件

css高级选择器：

color 文本颜色

超链接伪类：

列表样式

盒子模型：

display

---

加载css文件

<link href="CSS文件地址" rel="stylesheet" type="text/css"/>
rel制定这个页面使用这个外部样式，type制定文件类型为样式表文本
<type>@import url("css文件地址")</type>
导入式外部样式

css遵循就近原则，三种基本选择器优先级ID>class>标签

css高级选择器：

层次选择器
E F{}后代选择器  E>F{}子选择器  E+F{}相邻兄弟选择器  E~F{}通用兄弟选择器
结构伪类选择器
E:first-child  E:last-child  E:Fnth-child(n)  E:first-of-type  E:last-of-type  E:F:nth
属性选择器
E[attr]有这个属性  E[attr=val]这个属性值  E[attr^=val]值前缀匹配  E[attr$=val]值后缀匹配  E[attr*=val]任意位置匹配
属性选择器支持多个属性匹配，E[attr1][attr2][attr3]

<span>

<span>为中间文字添加样式，css指定span
font-family 字体 选择系统有的字体，可以选择一个，也可以先选英文后选中文字体
font-size 字号 npx
font-style 风格 normal italic obliqe能在任何情况产生斜体
font-weight 粗细 normal=400 bold=700 bolder lighter 100~900 
font 全部设置 风格 粗细 字号 字体

color 文本颜色

text-align 水平对齐方式 left right center justify
vertical-align 垂直对齐方式
text-indent 文本首行缩进 2em两个字符
line-height 文本行高 npx
text-decoration 文本装饰 none underline overline line-through
text-shadow 文本阴影
inherit 继承父元素的设置

超链接伪类：

a:link{} 单击前
a:active{} 单击未释放
a:visited{} 单击后
a:hover{} 停留

列表样式

list-style-type: none;
disc实心圆 circle圈圈 square实心正方形 decimal数字

<div>

页面排版的标签
background-color
background-image
background-repeat repeat-x repeat-y no-repeat
background-position auto原始 cover填充整个区域 contain完全显示图片 px或者百分比
只有auto显示的是原图，其他的都可能有缩放
background:linear-gradient(top #ffffff #000000);第一个参数是渐变方向，表示从第一个颜色到第二个颜色
渐变方向有to top,top,to bottom,right,to top left等,不同的浏览器内核要加不同的前缀，谷歌是-webkit-

盒子模型：

margin 外边距
border 边框 border-color设置边框颜色 border-width设置边框粗细 border-style边框风格：none没有 dotted点线 dashed虚线 solid实线
border-radius:左上 右上 右下 左下
padding 内边距
content 网页内容
边距边框都可以通过left right top bottom设置
box-size 设置div大小实际是指定哪一个的大小，参数有content-box border-box inherit继承父元素的盒子模式
box-shadow:inset x y blur-radius color 分别设置阴影类型，偏移量，半径和颜色
 

display

设置元素的显示类型

隐藏元素
visibility:hidden;隐藏，占用的空间和原来一样
display:none;隐藏，不占用空间
display:inline;显示为内联元素
display:block;显示为块级元素
isplay:inline-block -- 显示为内联块元素

块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , 
form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , 
noframes , noscript , ol , p , pre , table , ul , li

内联元素(inline)特性：
和相邻的内联元素在同一行,不能改变上述那些属性。

内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , 
i , img , input , kbd , label , q , s , samp , select , small , span , 
strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
applet ,button ,del ,iframe , ins ,map ,object , script