Web前端css样式

一 .CSS： 网页的表现(通过修改html标签默认的样式让页面展示美观效果)

1.CSS的使用方式

一般情况按照优先级 内联（在那个标签里面写的）>内部样式表（在head里面写的样式）>外部样式表(外部引入的css样式)

选择器越精确(越长)优先级越高 id选择器>class选择器>标签选择器(p,div等等)

 2. 选择器

              是为了选择到特定的标签

              格式 选择器{样式属性：属性值；样式属性：属性值}

(1)通配选择器：（*{ 内容 }）直接选择所以标签。

(2)标签选择器：（p{ 内容 }）直接使用元素标签。

(3)类名选择器：（.类名{ 内容}）直接使用元素名。

(4)id选择器：（#id{ 内容}）直接使用元素id。

(5) 逗号选择器：（p,span{ 内容}）逗号左右都是完整选择器，满足一方即可。

(6)空格选择器：（#id p{ 内容} ）在满足空格前选择器的标签内部去选择空格后满足的标签，可以      是子孙级别的

(7) 大于号选择器：（#id>ul{ 内容}）在满足>之前选择器的标签的子级标签汇中选择

(8)加号选择器：（#id >h1+p{内容}）加号前面选择器选中的标签紧邻的满足加号后选择器元素

(9)破折号选择器：（#id >h1~p{内容}）破折号前面选择器中的标签后面同级别的所以满足破折号      后选择器的元素。

2 .link (#id :link{内容})可以用于a标签的普通状态。

3 ：visited(#id: visited{内容})可以用于a标签访问过的状态

4：hover(#id:hover{内容})可以用于标签的鼠标划入状态

5：active(#id: active{内容})可以用于所以标签鼠标点击状态

      二，CSS常用样式

1 . 字体样式

font-family指定字体，可以为文字指定多个字体，不同字体间用“，“隔开字体名字中间有空格，要用引号引起来

font-size字体大小多用px/em单位

font-style字体倾斜效果

font-weight字体粗细

2 .文本样式

text-transform英文字母大小写转换 capitalize 单词首字母大写  uppercase全部大写 lowercase 全部小写

text-indent段落内容首行缩进

text-align文本的水平位置

text-decoration none

text-indent 段落开始空 em就是相当于当前字体大小

     a.背景

             background-color可以改变标签背景

            background-image可以改变定义背景图片

            background-repeat可以改变图片显示方式

             background可以自己设置背景的颜色，图片，大小等等。

3 .列表样式

list-style-type列表样式类型

list-style-image列表样式图片

list-style-position列表样式位置

      (1) CSS盒子模型

   

 

由上面图可以看到像一个盒子所以称之为盒子模型。

       大小（width/height） 内补(Padding) 边框(border) 外补(margin)

       内补使用自己背景色

       边框可以自定义样色

       外补使用外部标签背景色

  (2)   padding(内边距)

边框于内容之间的宽度，这个距离是和边框的距离，这个部分只有空白，不能设置外观样式，颜色等，只能设置空白的宽度设置

padding设置规则

一个数值是 上右下左

两个数值 第一个代表上下 第二个代表左右

三个数值:第一个代表上 第二个代表左右 第三个代表下

四个数值:第一个代表上 第二个代表右 第三个代表下 第四个代表左

  (3)  border(边框)

里面的边框，块级元素可以把他撑起来可以设置边框的宽度边框的颜色，边框的样式，也可以单独设置边框的属性。border的设置规则和padding的一样

一个数值是 上右下左

两个数值 第一个代表上下 第二个代表左右

三个数值:第一个代表上 第二个代表左右 第三个代表下

四个数值:第一个代表上 第二个代表右 第三个代表下 第四个代表左

    (4)  margin（外边距）

                     标签和他相邻的标签之间的空白宽度，外边距的设置是叠加的。设置规则和

border是一样的。

一个数值是 上右下左

两个数值 第一个代表上下 第二个代表左右

三个数值:第一个代表上 第二个代表左右 第三个代表下

四个数值:第一个代表上 第二个代表右 第三个代表下 第四个代表左

 (5)  width和height

只定义内容的大小，不含边框和边距。如果内容太多，超过了width或height，那么默认情况下将忽略width或height的设置。overflow属性

定义内容超过width和heigth时的显示方式

auto 根据情况，如果内容超出了width，则出现横向滚动条，如果内容超过了height，则出现纵向滚动条，否则不显示滚地条

hidden 超出部分被隐藏

4、display显示。

              1、none：隐藏，是隐藏起来了不是删除了。

              2、block:“块”元素，不能定义尺寸。

              3、inline ：“行内”元素，不能定义尺寸。

              4、inline-block：“行内块”元素，可以定义尺寸，可以改写尺寸。

5、浮动

 

              关于浮动运用float将文档流并且向左或右移动，然后浮动到边缘。

              可以利用clear来清除浮动，另起一行，有Left right both 清除浮动。

              both就是将新的浮动在原来浮动之后另起一行。

 6、定位

              position:后面加上relative，sticky等。

              static静态定位一般不写默认就是静态定位，

relative相对定位：相对文档流的默认位置 能使用lefe，top移动位置

absolute绝对定位 相对于外层第一个非static定位，可以使用lefe，top移动位置

              sticky粘性定位 可以利用top 和bottom来选择。

fixed固定定位可以国定在网页左下方和网页右下方。

       2.8、扩展

              transform属性 可以改变方向

@keyframes可以自定义函数

       2.9制作导航栏。

              1使用div加a

              2使用列表浮动

              3使用列表加行内块

              可以看D:\webprojects\0826\4导航条.html里面的代码

       2.10制作网页页面。

可以利用header和section和aside和footer进行一个也页面的布局使页面更具有条里

可以看D:\webprojects\0827\3页面.html

以上是自己总结所学习的css样式，可能不太好，

    希望以后能够更加好，谢谢大家。