前端学习:

一 css学习:

1.基本语法选择器:

  1.1 选择器:{属性:值}    例子:h1 {color:red; font-size:14px;}

  1.2 选择器分组:例子   h1,h2,h3,h4,h5,h6 { color: green;}

  1.3 多继承:

  1.4 派生选择器:

        后代选择器:li strong { font-style: italic; font-weight: normal;}

        子元素选择器: h1 > strong {color:red;}

        相邻元素选择器:h1 + p {margin-top:50px;} (拥有共同的父元素)

   1.5 id选择器:以#定义  #red {color:red;} (区分大小写)

   1.6 类选择器:以.定义 .center {text-align: center}(区分大小写)

   1.7 属性选择器:以[] [title]{color:red;}

      属性和值选择器:[title=W3School]{border:5px solid blue;} (指定值属性)

      多个值属性选择器:[title~=hello] { color:red; }(包含hello即可 空格分隔)

      连字分隔符属性选择器:[lang|=en] { color:red; }(开头字符)

   1.8 元素选择器:h1 {color:red; font-size:14px;}

   1.9 通配符选择器:* {color:red;}

  2.0 结合选择器:p.important {color:red;}

  2.1 多类选择器:.important.urgent {background:silver;}

  2.2伪类:

    例子:

    a:link {color: #FF0000}		/* 未访问的链接 */
    a:visited {color: #00FF00}	/* 已访问的链接 */
    a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
    a:active {color: #0000FF}	/* 选定的链接 */
2.3 伪元素:
   p:first-letter {color:#ff0000;font-size:xx-large;}

 

 2 样式表:

  外部:<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

  内部:<head>

    <style type="text/css">

      hr {color: sienna;} 

      p {margin-left: 20px;}

      body {background-image:

      url("images/back40.gif");}

    </style>

 </head>

  内联:<p style="color: sienna; margin-left: 20px">This is a paragraph</p>

3 对齐和尺寸

4 框架盒子

5 定位:

  绝对定位:

  相对定位:

  浮动:

 

 

  

        

posted @ 2020-10-21 14:36  net技术的爱好者  阅读(74)  评论(0编辑  收藏  举报