css笔记

1、引用css样式

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

2、Import

   Import+空格+url(css文件路径)

3、css里注释/**/

4、选择器

  • 标签选择器 :如pa等标签
  • 通配符选择器:*{}。。。全局选
  • 类选择器:.类名{ }
  • Id选择器:#id{}

5、复合选择器

  • 标签指定式选择器 h3.class{ }
  • 后代选择器 .类名 li{}; ul li{}
  • 并集选择器:p,a,span{}
  • 子元素选择器:div>p{}  只有有div下的p标签。

注释:子元素选择器使用大于号">"做为连接符,子元素选择器只能选择作为某元素子元素的元素,而后代选择的两则之间可以加标签,但父子元素中间如果加标签就找不到了

6、属性选择器   H1[id]{……}

7、伪类

  first-line     .类名:first-line{colo=”red”}

  :first-letter

  :first-child

  :before

  :after

A:link{} 用于未被访问过的标签

A:hover{}用于鼠标悬停时状态设置

A:active{}用于元素被激活后

A:visited{}用于已被访问过的

A:focus{}用于元素拥有焦点时

8、层叠性

   样式叠加和覆盖,按照css优先级

9、继承性

   当设置div样式的时候,其下子标签p,也跟着一起生效

10、css优先级

  • 内嵌样式>嵌入样式>外部样式
  • id选择器>类选择器>标签选择器>通配符选择器

11、Display

元素值

none

此元素不会被显示

block

元素会被设为块级元素

inline

默认值,此元素会被设置行内元素

Inline-block

行内块元素

   

12、Font

   Font-family:字体类型,什么字体

   Font-size:字体大小

   Font-weight:字体厚度

   Font-style:字体样式(斜体……)

Fontfont-style font-weight font-size font-family (font:itline 700 12px “黑体”)

13、字符和文字间距

Letter-spacing:字间距

Word-spacing:单词间距

14、text-decoration:文本装饰

none;去掉文字样式

Underline:下划线

Overline:上划线

Line-through:删除线

15、行高

行高=文字的高度+行间距

Font:12px/1.5em “宋体”

Font:12px/150%“宋体”

Font:12px/1.5 “宋体”

Font:12px/20px “宋体”

行高加单位是先计算后继承,以父为基准

行高不加单位先继承后计算,以子的字体大小为准

Line-height:文本垂直居中,一般设置为何height一样值,文本垂直居中,左右居中用text-aline.

16、

text-align:水平对齐

 Text-indent:首行缩进    logo会设置负值

17、white-space:设置文本换行控制

  Normal:默认值,自动换行(一连串不间隔的字母除外)

  Pre:预格式化,把当前文档的书写格式保留

  Nowarp:强制不换行

18、word-break设置单词换行控制

Normal:使用浏览器默认的换行规则

Break-all:允许在单词内换行

Keep-all:只能在半角空格或连字符处换行

19、Div

           Border1px  silver red;

           Padding:20px 0 10px 5px;

           Padding:20px 50px;

           Padding:0 auto;

           Margin:200px 20px 20px 10px

           Margin:20px; 0px;

二、css部分编程技巧

1.让子div在父div中垂直左右居中

  . div{

Postion:relative;

}

.div{

Posetion:absolute;

Top:0;left:0;top:0;bottom:0;

Margin:auto;

}

2.首先建站的时候要设置header cenet footer的宽度,一般为760Headerfooter分离出来

原文地址:https://www.cnblogs.com/amyjing/p/8870356.html