css基础

Css

Cascading style sheets 层叠样式列表

Css不仅可以静态的修饰网页，还可以配合配合各种脚本语言动态的对网页元素进行格式化。

 

Css作用

结构和样式分离，是的后期易于维护和修改。

可以使用多套样式，使网页由任意样式的切换效果

页面载入更快，降低服务器成本

 

样式分类

样式分为内部样式、外部样式、行内样式。

内部样式

<style type="text/css>

   p{

Background-color：red；

Font-size：20px；

}

 

外部样式

<link rel=”stylesheet” type=”text/css” href=”index.css”>

Css文件内写入

P{

Background-color：red；

Font-size：20px；

}

 

行内样式

<p style=" Background-color：red；Font-size：20px；"></p>

 

选择器

标签选择器

P{

Background-color:red;

Font-size:20px;

}

定位需要修改格式的位置

 

 

 

类选择器

<style type="text/css>

   .xz{

Background-color:red;

Font-size:20px;

}

 

<p  class=“xz”>类选择器类选择器</p>

Xz作为类标签定位要修改的部分

 

Id选择器

<style type="text/css>

   #xz{

Background-color:red;

Font-size:20px;

}

 

<p  id=“xz”>类选择器类选择器</p>

 

背景设置

Background-color   背景颜色

Background-image  背景图片 url（地址）

Background-repeat  背景图片的重复方向 默认repeat  repeat-x横向  repeat-y纵向  no-repeat不重复

Background-attachment 背景是否随着滚动条滚动 scroll fixed

Background-position 背景图片起始位置   top/buttom/left/right  center/left/right如果只定义了一个值那么另一个指为center   x% y% 如果只定义了一个值那么另一个指为50%

X px  ypx如果只定义了一个值那么另一个指为50%

如果主要修改背景可以写成

Body{

background: yellow  url（image/1.jpg）repeat scroll/….

}

符合属性可以来整体定义

 

注释

/*----*/

 

文本样式

Color    单词 十六进制#000000  rgb（255，255，255）   文本颜色

Direction             ltr  rtl                            文本书写方向       

Letter-spacing        npx可以为负数                     字符间距  

Line-height           npx                               行高

Text-align            left right center justify                对齐方式

 

文本修饰

text-decoration    none underline overline line-through             文本的修饰：下划线

text-shadow     h-shadow（px）v-shadow（px） blur模糊程度 color颜色文本设置阴影】

text-transform    none capitalize首字母大写uppercase全部大写lowercase               全部小写

text-indent       npx  Nem（em表示字符单位）                   首行缩进  

 

字体类

定义文本大小，字形

font-family    隶书、宋体、楷体等字体            设置字体

font-style     normal   italic部分斜体  oblique    规定斜体的文本

Font-weight   normal   bold  100-900            文本加粗

font-size          npx                              字体大小

 

列表样式

list-style-type     none,disc,circle,square,decimal….     设置列表项目的外观

list-style-position    inside,outside                  列表符号的位置

list-style-image      url,none                  把图片设置为列表项目的标记

list-style        同前面三个                  简写属性，涵盖以上三个列表样式属性

 

 

伪类选择器

大多在超链接中使用。

：alink      未访问的链接

：visited     已经访问过的链接状态

：hover   鼠标悬挂在链接上的状态

：active   向点击的链接设置样式

：focus   选择拥有键盘输入焦点的元素 大都在文本框中使用 大多不和focus一起使用

 

 

结构性伪类

First-child 选择元素的第一个元素

Last-child  选择某个元素的最后一个元素

Nth-child（n）选择某个元素的一个或者多个特定的子元素

Nth-last-child（n）选择某个元素的一个或者多个特定的子元素  从这个元素的最后一个子元素开始

First-of-type   选择一个上级元素下的第一个同类子元素

 

 

伪元素选择器

：：selection   选择内容设置样式   

：：before    在选中的项目之前写入内容   content：“内容内容”

：：after     在选中的项目之后写入内容   content：“内容内容” before于after设置的内容无法被选中  

：：first-line  选中内容的首行设置样式   p：：first-line{       }

：：first-letter 首个文字设置样式

 

Css其他选择器

1、id  *   选择指定元素中被用户选中的内容

2、逗号选择器 ,     联合选择器

3、空格选择器       子孙（后代）选择器

4、> 选择器         子选择器（不是子孙后代）

5、+ 选择器          同辈，兄弟选择器 紧跟者的属性

6、[]                属性选择器

 

 

选择器的优先级

1、！important

2、行内样式

3、ID

4、类  class

5、标签

6、通配符  *

7、浏览器默认属性