CSS3学习

超、凢脫俗 2022-05-31 01:20 172阅读 0赞

使用外部CSS  
<link href="" type="text/css" rel="stylesheet" />  
href:路径  
type:文件类型  
rel:该特性表明HTML页面和被链接文件的关系。CSS文件为stylesheet  
  
  
使用内部CSS <style> </style> 声明在head里面  
<style type="text/css">  
………………  
</style>  
  
CSS选择器  
通用选择器     \*\{\}  
类型选择器    h1,h2,h3\{\}  
类选择器    .note\{\}   note为class特性名  
ID选择器       \#name\{\}    name为id特性名  
子元素选择器   li >a\{\}    父元素为<li>的<a>元素  
后代选择器     p a\{\}      同上  
相邻兄弟选择器 h1+p\{\}   用于h1之后的第一次p标签  
普通兄弟选择器 h1~p\{\}  
  
优先级可用!important 来强调  
  
  
继承 padding：inherit;       inherit为特性   继承padding属性的值  
  
  
前景色：color:DarkCyan,\#ee3e80,rgb(100,100,90);  
  
  
背景色：background-color:  
  
  
透明度：  
opacity:0~1.0之间  
rgba(0,0,0,0.5) 前三个为颜色 最后一个为透明度，有些浏览器不支持这个特性  
  
  
HSL和HSLA  
通过色调、饱和度、明度来调节颜色  
hsl(0,0%,78%)  
hsla(0,100%,100%,0.5) 最后一个为透明度  
  
字体选用：font-family  
font-family:Georgia,"Courier New"    两个以上单词组成的字体，要用双引号  
  
  
字体大小：font-size  
用三种表示方法：像素12px  
百分数100%相当于16px  
em值，1em相当于一个m的大小  
  
  
字体大小像素刻度：  
12刻度：h1   24px      16刻度：h1   32px  
h2   18px     h2   24px  
h3   14px     h3   18px  
body 12px     body 16px  
  
选用更多字体：@font-face  
@font-face\{  
font-family:"网站中字体名"  
src:url(路径)\}  
然后即可在文件中使用该字体  
  
粗体：font-weight  
normal:普通  
bold:粗体  
  
斜体：font-style  
normal:普通  
italic:该值使文本以斜体显示  
oblique:该值使文本倾斜显示  
  
大小写：text-transform  
uppercase:大写显示  
lowercase:小写显示  
capitalize:每个单词首字母大写  
  
下划线和删除线：text-decoration  
none:该值会把应用在文本上的装饰线删除  
underline:该值会在文本底部增加一条实线  
overline:该值会在文本顶部增加一条实线  
line-through:该值会用一条实线穿过文字  
blink：该值会使文本动态闪烁  
  
行间距：line-height  
初始大小最好设为：1.4~1.5em之间  
  
字母间距：letter-spacing  
  
  
单词间距：word-spacing 默认0.25em  
  
  
对齐方式：text-align  
left:左对齐  
right:右对齐  
center:居中对齐  
justify:两端对齐  
  
垂直对齐：vertical-align  
"top" 将文本的第一行置于靠近顶端位置  
"middle"将文本的第一行置于靠近中间位置  
"buttom"将文本呢的第一行置于靠近底端位置  
baseline、sub、super、text-top、text-buttom  
  
文本缩进：text-indent  
通常同em值或像素，可为负数  
   
投影：text-shadow  
三个长度值和一个颜色值  
第一个向左或向右延伸的距离  
第二个向上或向下延伸的距离  
第三个可选项：用于指定模糊的程度  
最后一项为投影颜色值  
  
首字母或首行文字：  
p:first-letter\{  
设定格式  
\}文本首字母  
p:first-line\{  
设定格式  
\}文本首行  
  
为链接设置样式：  
a:link\{  
设置未点击时的样式  
\}  
a:visited\{  
设置点击后的样式  
\}  
  
  
响应用户：  
:hover\{  
设置鼠标放在上面的样式  
\}  
:active\{  
体现一种鼠标按下时的样式  
\}  
:focus\{  
拥有焦点时生效的样式  
\}  
  
特性选择器：(与正则类似)  
p\[class\\id\]:匹配的是特性，而不是特性值  
p\[class="kzx"\]：匹配特性为class的特性值为kzx的<p>标签  
p\[class~="xx"\]:匹配特性为class的特性值中含有xx单词的<p>标签 如class="fsd xx"  
p\[class^="d"\]:匹配特性的特性值为"d"开头的特性为class的<p>标签  
p\[class$="d"\]:以d结尾  
p\[class\*="do"\]:包含do字符串的  
  
盒子的大小：  
div\{  
height:300px;  
weight:200px;  
background-color:\#ee3e80;  
\}  
  
宽度限制：  
min-width:;  
max-width:;  
  
  
高度限制：  
min-height;  
max-height;  
  
  
内容溢出处理方式：  
p.one\{  
overflow:hidden; 文本长度超过盒子大小自动隐藏  
overflow:scroll; 出现滚动条  
\}  
  
  
边框宽度：border-width  
border-width:不可使用百分数表示  
border-left-width:  
border-right-width:  
border-top-width:  
border-bottom-width:  
  
  
边框样式：border-style  
solid:一条实线  
dotted：一串方形点  
dashed：一条虚线  
double：两条实线  
groove:雕入页面的效果  
ridge：在页面上凸起的效果  
inset：嵌入页面的效果  
outset：看起来像凸出屏幕的效果  
hidden/none:不显示任何边框  
还可以对上下左右分别设置：  
border-left-style:  
border-right-style:  
border-top-style:  
border-bottom-style:  
  
边框颜色：border-color  
  
  
快捷方式：border\{  
color:  
width:直接写在里面  
  \}  
    
内边距：padding:  
也可分别设置：padding-left、padding-right、padding-top、padding-bottom  
  
外边距：margin  
也可分别设置：margin-left、margin-right、margin-top、margin-bottom  
要是盒子在页面上居中显示：只需把margin-left、margin-right设置为auto  
  
内联元素与块级元素的转换：  
display:inline      使块级元素变得像内联元素一样  
block 内联元素变得跟块级元素一样  
inline-block:可以使一个块级元素向内联元素那样浮动并保持其他块级元素的特征  
none:  将该元素隐藏，该位置不会占用空间  
  
盒子的隐藏：  
visibility:hidden       隐藏元素，但元素占用的空间位置会保留，置为空白  
   visible  显示元素  
     
边框图像：border-image  
该属性有三种信息：  
图片的URL、切割图片的位置、如何处理直边：stretch 伸展图片  
repeat  重复图片  
round 环绕图片，不合适时自动调节图片的大小  
例子：p\{  
\-moz-border-image:url("") 11 11 11 11 stretch; //有助于浏览器显示边框图像  
\-webkit-border-image:url("") 11 11 11 11 stretch;   //有助于浏览器显示边框图像  
border-image:11 11 11 11 stretch;  
\}  
  
盒子的投影：box-shadow  
box-shadow:（inset 创建内部阴影）水平偏移、垂直偏移、模糊距离(如果省略该值，阴影会显示为实边)、  
阴影扩展(正值延伸、负值收缩)、颜色  
例子p\{  
\-moz-box-shadow:5px 5px 5px 5px \#777777;  
\-webkit-boxo-shadow:5px 5px 5px 5px \#777777;  
box-shadow:5px 5px 5px 5px \#777777;  
\}  
  
  
设置边框为圆角：border-radius  
border-radius:10px;为半径大小  
也可上下左右四个角分别设置  
  
椭圆形：border-radius:80px、50px通过横向、纵向不同的值设置  
  
  
项目符号样式：list-style-type  
无序列表：list-style-type:none、disc(黑心圆)、circle(空心圆)、square(黑心正方形)  
有序列表：list-style-type:decimal    1 2 3  
  decimal-leading-zero  01 02 03  
  lower-alpha    a b c  
  upper-alpha    A B C  
  lower-roman    i ii iii  
  upper-roman    I II III  
    
项目图像：list-style-image  
list-style-image:url("路径")  
  
标记定位：list-style-position  
outside:位于左侧，默认方式  
inside：位于左侧，标记于文本内部  
  
列表快捷方式：list-style\{  
  \}  
    
表格的边框：empty-cells  
show 显示边框，同时要设置边框样式才能显示出来  
hide 隐藏边框  
inherit 继承  
  
表格中单元格之间的空隙：  
border-spacing:设置空隙宽度 课设两个值 表示横向和纵向  
border-collapse:collpase 表示合并为一个单独的边框  
separate 表示相邻的边框分离  
  
  
  
相对定位：  
设置：position:relative  
通过left(左)、right(右)、top(上)、bottom(下)来设置位置  
  
绝对定位：  
设置：position:absolute  
通过left(左)、right(右)、top(上)、bottom(下)来设置位置  
  
固定定位：  
设置：position:fixed  
通过left(左)、right(右)、top(上)、bottom(下)来设置位置  
  
重叠元素：  
通过设置z-index的值来判定哪个在上层，越大就越上层  
  
  
浮动元素：  
float:right、left是元素靠右(左)，并是其他在其周围  
  
清除浮动：  
clear:right 盒子右侧不能接触同一个包含元素内的其他任何元素  
  left  盒子左侧不能接触同一个包含元素内的其他任何元素  
  both  盒子左侧和右侧都不能接触同一个包含元素内的其他元素  
  none  盒子左右两侧都可以接触元素  
  none  盒子左右两侧都可以接触元素  
  
  
只有浮动元素时，设置边框会出现边框不包围浮动元素，变为一条直线  
需要将 overflow设置为auto  
width设置为100% 可以解决或者增加一个不是浮动元素的元素  
  
调用框架  
<link rel="" type="" href="" />  
或者@import url("")  
  
控制图像的大小：  
image\{  
width:;  
height:;  
\}  
  
使图像对齐  
image\{  
float:left;  
\}  
  
背景图像：background-image:url("");  
  
  
图像的重复：  
background-repeat:repeat   在水平和垂直方向上都重复，是默认的方式  
  repeat-x 只在水平方向进行重复  
  repeat-y 只在垂直方向重复  
  no-repeat 只出现一次，不重复  
    
图像随页面的移动：background-attachment:fixed    图像固定  
scroll   图像随界面移动  
  
当图片设置为background-repeat:no-repeat  
可以用background-position设置位置  
left-top:左上角  
left-center:左边中间  
left-bottom:左下角  
center-top:中上  
center-center:中间  
center-bottom:中下  
right-top:右上  
right-center:右中  
right-bottom:右下  
  
可以用background\{  
来设置所有样式  
  \}  
    
颜色渐变：  
用background来设定  
background:linear-gradient(red,blue)  //从上到下渐变  
   linear-gradinet(to right,red,blue) //从左到右渐变