css笔记

css学习笔记


样式表：（包含三种）
1.外部样式表：可以通过改变一个文件来，改变整个的外观
外部样式表的调用方法：（放在文档的头部中，而且不能放在style标签中）
<link rel = "stylesheet" type = "text/css" href = "mystyle.css">
外部文档的书写：以.css为文档的扩展名，文档中不能包含任何html标签（不要再属性值与单位之间留空格）


2.内部样式表：单个文档需要特殊样式时候使用内部样式表。
使用方法：在style标签中调用。例如：
<style type ="text/css">
hr{color:black;}
....
</style>


3.内联样式：




CSS选择器：
派生选择器，id选择器，类选择器，属性选择器
1.派生选择器：就是把两个标签重叠使用
例如：
定义选择器：
strong{
color:red;
}
h1{
color:yellow;
}
h1 strong {
color:green;
}
调用：
<p>显示格式为p标签<strong>显示格式为strong标签</strong></p>
<h1>显示格式为h1标签</h1>
<h1>显示格式为h1标签<strong>显示格式为h1 strong标签</strong></h1>


id选择器：定义：#+id值+定义内容  调用：在标签中用 id = "id值"（一般结合派生选择器一起使用）
例如：（注意重叠标签的顺序，使用的时候也要用这样的顺序）
定义：
#red{color:red;}
#red p{color:green;}
调用：
<h1 id = "red">显示red标签格式</h1>
<h2 id = "red">显示#red p标签<p>格式</p></h2>




类选择器：定义：点+类名 +想要定义的格式  使用在标签中用 class ="类名"
例如:（也可用作派生选择器）
定义：
.center{
text-align:center;
}
调用：
<p class="center">这是class选择器啊</p>




属性选择器：定义：[title= 值 ]+想要定义的格式(不只是title可以一般属性全部可以，例如href，属性后面的值可有可无，
具有值的话就可以仅仅在此属性等于对应值的时候显示，而且可以选择"~=")
例如：（只显示在title等于指定值的标签上）
定义：
[title = "school"]{
color:red
}
使用：
<p title = "school">一个人走</p>


子元素选择器：在后代选择器中，仅仅改变第一个子代元素
使用：
h1 > strong {color:red;}


相邻兄弟选择器：两个标签有相同的父元素，而且只有二者相邻的时候才会有效果
style：h1 + p {margin-top:50px;}


body：<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>（只有第一行与第二行会出现效果，）




cursor:鼠标指在上面会变化，属性值pointer
伪类：结合选择器一起使用：
使用：选择器：伪类（样式）
伪类有哪些：
1 链接的那四种状态属性（a:link, a:visited, a:hover,a:active）


2 first-child： 只有在第一次调用的时候会变化，以后则不会


3 lang ： 


伪元素：
1 first-line：（向第一行设置相应属性）
 p:first-line{样式}


2 first-letter：（向首字母设置特殊样式）
p:first-letter{样式}


3 before：（向元素内容前面插入新内容）
例如：在前面插入一幅画
h1:before
  {
  content:url(地址);
  }


4 after ：（向元素内容后面插入新内容）
例如：参考before




css样式：


css背景
背景颜色：background-color(使用：background-color:blue,可以所有属性设置背景颜色。尽量以选择器的形式表现)
背景图像：background-image(使用：background-image:url(加地址)。注意此处是加地址url也要保存，地址是要加"/" 而不是"\")
背景重复：background-repeat(使用：background-repeat: repeat-y。（此属性为沿着x轴方向重复，还有repeat-x,no-repeat）)
是否居中：background-position(使用：background-position:center。 （居中）)【此属性也可用双百分比作为值。第一个表示x轴位置，第二个表示y轴】
背景滚动：background-attachment(使用：background-attachment:fixed. 背景图片禁止滚动，默认值为scroll会滚动)




css文本：
文本修饰：
缩进文本：text-indent（使用：text-indent：5em。[还可以为负值，或者用百分比还有px]）
水平对齐：text-align(使用：值有left，right，center ，justify（水平对齐），)
字间隔：letter-spacing(使用：默认值为0，增加即会变大间隔（单位：px、em）)
字母间隔：word-spacing(使用：增大字母间隔)
字符转换：text-transform：（使用：处理文本的大小写问题。值：none（不变），uppercase（全部变为大写），lowercase（变为小写），capitalize（首字母大写））
文本修饰：text-decoration:(值：none（无修饰，可用于去掉链接地址的下划线），underline（下划线），overline（顶端加划线），line-though（贯穿线），blink（文本闪烁）)
处理空白格：white-space:(影响对源文档中的空格，值：normal（默认值），per（和标签per一样会保存空格换行），nowrap：(不换行)，per-wrap：（保留空格符，换行不保留），per-line（保留换行符不保留空格符）)
文本方向：direction：（ltf（从左到右），ftl（从右到左））


文本属性：
color：颜色
line-height:设置行高




字体类型：
font-family:指定字体
font-style:字体风格(属性值：normal（正常默认值），italic(斜体)，oblique(斜体))
font-variant:字体大小写（small-caps将字体换为小型的大写字母，（小型：字体比较小））
font-size:字体大小
font-weight：字体粗细（normal（默认值）,bold(加粗)）


css链接：
链接的特殊性在于可以根据它所处的状态来设置样式（a:link-普通的未被访问的，a:visited-用户已经访问的页面
a:hover-鼠标停留在链接上方，a：active-链接被点击的时刻）


顺序：hover必须在link和visited之后，而active在hover之后




css列表：无序列表标签ul，列表项标签li
列表标记类型：list-style-type(square：小正方形，circle：圆圈，upper-roman：罗马文字，
lower-alpha：小写字母，decimal（数字），none（没有标示)
列表项图标：（用法：ul li (list-style-image:url(地址))）
无序列表标签ol，列表项标签li


css表格：表格标签：table，行标签：th，列标签：td
表格文本对齐：text-align：（left，right，center）
表格与内容的间距：padding
边框属性：border(宽度，样式，颜色)


边框：边框标签：online
边框样式：outline-style：（值：solid（实线），dotted（点线），dashed（虚线）...）
边框颜色：outline-color:
边框宽度：outline-width:




css框模型：（介绍各种距离）
border：（边框包含多种属性，宽度，样式，颜色。）
border-style：（边框属性：none（空）solid（实线）dotted（点线）dashed（虚线） double（双线））
border-width：（边框宽度）
border-color：（边框颜色transparent:透明）
margin：外边距（auto：浏览器自定义长度）




padding：内边距
内边距：可以分为四个独立属性，padding-top(上边距),padding-right(右边距)，padding-left(左边距)，padding-bottom（下边距）
当padding后面直接加几个属性的时候，分别表示上边距，右边距，下边距，左边距


透明边框：（鼠标移上去会变颜色）
例如：创建一个透明边框，当鼠标移上去就会变色
style:
a:link{
border-width:5px;
border-style:solid;
}
a:hover{
border-width:7px;
border-color:red;}
body:
<a href="#">我只是一个会装逼的链接啊！</a>


css浮动：position属性：
相对定位：（偏移量是相对于其正常位置）
position：realative（偏移属性left、right后面加偏移量）




绝对定位：（偏移量相对于整个网页窗口，元素可以放置到页面的任何 位置）
position：absolute（偏移属性left、right后面加偏移量）




固定定位：（）
position：fixed（偏移量相对于浏览器窗口（显示部分），即无论怎样拖动滚动条内容不会现对于显示窗口变化）


浮动属性：float：（值：left，right）




图像透明度：
属性：opacity（值：0~1，越大越清晰）




对图片属性的处理：
transform:（图片变换方式）
 rotate(30deg) : 旋转图片角度 ,30表示旋转度数,当然也可以是负数，表示逆时针旋转 
 scale(0.5) : 表示图片放大的倍数,可以是整数,也可以是小数,当然也可以是负数,表示当前图片旋转180时候的效果
 translate(10px,20px) : 表示图片的位移,10px 表示水平位移,20表示垂直位移
 skew(20deg,30deg) ： 表示图片倾斜,20deg 表示水平倾斜,30deg表示垂直倾斜
例如：transform:rotate(0deg) scale(1) translate(10px,20px) skew(20deg,30deg);


transition : 表示旋转的属性,如果这里还有其他的属性,比如背景图片,这里只需写成all就可以
                        2s 表示时间   
                        ease :表示匀速旋转
                        ease-in:表示先快后慢
                        ease-out：表示先慢后快
例如：
  transform:rotate(30deg) scale(1.5);
            transition:transform 2s ease;