码迷,mamicode.com
首页 > Web开发 > 详细

CSS学习

时间:2019-01-27 19:22:14      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:margin   设置   字号   问题   代码   外部   idt   repeat   布局   

CSS学习框架如下:

  •     引入CSS的三个方式

  •     选择器的用法

  •     常用属性

  •     布局和盒子模型

  •     定位

一.引入方式

  1. 外部引入

    1. 使用<link>标签

    2. 在外部建立*.css文件

    3. <link rel="stylesheet" type="text/css" href="css/style.css文件路径">

  2. 内部引入

        <style>在此引入</style>

  3. 内联样式

        示例<p style="color:pink;"></p>

  4. 对于任意标签,一共有四种样式,除了以上三种外,还有浏览器默认样式,可修改。

二.选择器

  1. ID选择器

    <style>#p1{添加样式}</style>

    <p id="p1"></p>

  2. 标签选择器

    p{}

  3. 类选择器

    <style>.p1{添加样式}</style>

    <p class="p1"></p>

  4. 包含选择器

    .p span{}在p类中的span标签的样式

  5. 并列选择器

    .p,span{}p类和span标签共同拥有的样式

  6. 伪选择器

    a:hover{}鼠标浮动效果

    a:link{}未访问时的效果

    a:visited{}访问后

    a:active{}正在被访问

三.常用属性

  1. 文本属性

    1. color:red;文字颜色

    2. letter-spacing:10px;汉字间距

    3. word-spacing:10px;单词间距

    4. text-align:center;字居中

    5. text-indent:4px;首行缩进

    6. line-height:10px;行号,当与高一致时,常常用于垂直居中

    7. text-decoration:none;underline;划线

  2. 字体属性

    1. font-family:楷体;字体

    2. font-size:100px;字号

    3. font-style:italic;斜体

    4. font-weight:bond;黑体

      忘记之前HTML学习的即可

  3. 尺寸属性

    1. width:10px;

    2. height:10px;

    3. 与后面的盒子模型一起理解,记住:内联元素无法设置尺寸,如<span>

  4. 背景属性

    1.  

    2. background-image:url(#);

    3. background-attachment:fixed;

    4. background-repeat:none; 

    5. background-position:10px 20px;

四.布局定位以及盒子模型

  1. 盒子模型

    1. 指的是每个元素所占的空间位置由它的宽 高 内边距 外边距 和边框共同组成

  2. 边框属性

    1. border:10px solid #000000;常配合使用。

    2. border-left: 20px solid #00ff00;仅一条边时。

      备注:虚线:dashed;

  3. 内边距

     

    1. padding:50px 四边都是50px的内边距

    2. padding:0px 50px 第一个值上下边距  第二值是 左右边距

    3. 3值上   左右   下

    4. 4值 上 左 右 下

  4. 外边距margin同上

    注意:外边距有合并现象

  5. 定位问题

    1. position:absolute;relative;fixed;

    2. 绝对定位:

      1. 常用于做网站的广告条,脱离了文档流,不占原来的流空间,尽量减少使用

      2. z-index只能在绝对定位中使用,不可以在相对定位中使用。

    3. 相对定位:占用标准文档流,用于布局

    4. 固定定位

君君的备注:

  DIV+CSS的学习中,最重要的就是布局问题。在编写代码时不要着急,一定要先理清楚每个素材所在的层次,做到心中有数,才能敲字如有神。

笔记是为了以便自己未来用到时查阅,被人指正内容过于主观,仔细想想确实如果能受惠大众更好,以后会努力改进~

CSS学习

标签:margin   设置   字号   问题   代码   外部   idt   repeat   布局   

原文地址:https://www.cnblogs.com/anzhilanxiao/p/css.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!