1.什么是css,指的是叠层样式表,控制网页的的外观显示。
2.引入css的三种方式,外部链接,内部链接,内联,分别的语法是,<link rel="stylesheec" type="text/css" href=""/>,<style type="tex/css"></style>,style="属性:值"
3.css选择器,选择器就是要针对你要所改变的元素,而单独定义的样式,就常见的选择器:ID,CLASS,元素选择器,子元素选择器,群组选择器,相邻选择器,id选择器是唯一的意思是,只能定义一个id名相同的,class选择器,类选择器,可以为多个元素定义,id选择器和class选择器的区别在于,id是唯一的就像每个人的身份证一样只有一份号码是唯一的,而class就是像每个人的名字一样可以重复,元素选择器就是选泽要改变的元素标签名字,子选择器就是在当前元素后的子元素,群组合选择器就是选泽所有想改变的元素,相邻选择器就在当前同级元素的下一个元素。
语法:<p id="one">这是一个段落</p> 相应的 css规则: #id{ 属性:值}
<p class="two"></p><p class="two"></p>相应的css规则:.class{ 属性:值}
<p>这是一个段落</P> 相应的css规则:p{属性:值}
<div><p>这是一个段落奥</P></div>相应的css规则:div p{属性:值}
<div><p>这是一个段落奥</P></div>相应的css规则:div,p{属性:值}
<div>
<p>这是一个段落奥</P>相应的css规则:div+div{属性:值}
</div>
<div>
<p>这是一个段落奥</P>
</div>
4.字体样式
字体的类型:font-family: '';取值宋体,微软雅黑等、
字体的大小:font-size:;通常以像素值px,其他的还有em ,百分比
字体的粗细:font-weight:;取值bold粗体显示,normal正常
字体的样式:font-style:;italic斜体,normal正常
颜色;color;
行高:line-height:;字体的行高,一行的高度不是距离。
5.文本样式
文本装饰:text-decoration:;取值有,line-through(贯穿线),underline(下划线),overline(上划线)
文本对齐:text-align:;取值有,center(居中),left(左对齐),right(右对齐)
文本缩进:text-ident:;取值单位px.em,百分比
文本大小写:text-transform:;取值有 uppercase(大写) lowercase(小写) capitalize(首指母大写)
文本的字间距:letter-sapcing:;取值单位px ,em ,百分比
词间距:word-sapcing:;取值单位px ,em ,百分比
6.边框
border边框 边框的大小 类型 颜色 分别的设置
border-width:; 取值是单位px em 百分比
border-style:; 取值是solid 实线 dashed虚线 等
border-color:;取值颜色 ,可以是十六进制。
7.背景
背景图片,背景是否被重复 ,背景的位置,背景是否滚动 分别是
background:URL;
background-repeat:;取值有,repeat(重复) no-repeat(不重复) repeat-x(x轴重复) repeat-y(y轴重复)
background-position:;取值可以是 center left right top
background-scroll:; 取值是scroll fixed
可以简写;background: URL repeat position scroll;
8.超链接样式
当我们鼠标移动到a标签上面,可以让他显示的样式,通过伪类来设置,不一定是a元素才有可以设置,在html中 任何元素可以都已设置伪类。语法:元素:hover
当鼠标未访问的样式a:link;,当鼠标访问后的样式a:visited;当鼠标移动到的样式a:hover;当鼠标按下时的样式a:active;
9图片
图片大小:可以通过设置它的宽度 高度来设置。
图片位置:通过text-align(水平居中),vertical-aligin(垂直居中)
图片边框:通过border来设置它的边框
10列表
列表的样式:list-style-type:;取值none,circle,等
列表图片:list-style-image:;
11表格
表格默认是没有边框的,我要通过border给它值
12,盒子模型
盒子模型分为:内容区,内边距,外边距,边框
13布局
浮动布局:通过float浮动块元素,注意清除浮动。
定位布局:position来设置。然后设置。上右下左的值。
固定定位:position:fixed/scroll
静态定位:position:static