美文网首页
01.CSS初体验

01.CSS初体验

作者: Lv_0 | 来源:发表于2017-04-14 23:04 被阅读0次
  • CSS

☆ CSS 指层叠样式表 (Cascading Style Sheets)
☆ HTML元素通过CSS定义其展现形式
☆ HTML与CSS分别定义,实现内容与展示的分离处理
☆ 外部样式表极大的提高了工作效率
☆ CSS文件后缀为.css文件

  • CSS加入HTML的方式

★ 嵌入式>内联式>外联式>浏览器缺省设置(就近原则)
★ 嵌入式:
  <span style="color:bule">简书</span>
★ 内联式:
  <head>
    <style type="text/css">
        body {color: red;}
        p {margin-left: 20px;}
    </style>
</head>
★ 外联式:
  <head>
    <link rel="stylesheet" type="text/css" href="myStyle.css"/>
</head>
★ 补充:
1.嵌入式距离元素最近,作为属性单独影响某个固定的元素,展示优先级最高;
2.内联式,定义在<head>内,展示优先级居中,可影响单个元素,也可影响一类元素
    例如上例中即影响了所有的<body>内元素(包括嵌入元素)和<p>内元素
3.外联式,定义在单独的css文件中,展示优先级最低,可根据需要进行元素的排版,实际开发中应用最多
4.浏览器缺省设置,某些元素自带格式,若没有为其设置格式,则展示缺省显示
  • CSS基础语法

1.CSS的基本构成,选择器和声明,selector {declaration1; declaration2; ... declarationN }
2.选择器即HTML里面的元素,即获取元素并定义/改变其展示形式
3.声明即属性和属性值,通过设置属性和属性值定义元素的展现形式
4.如body {property1:value1;property2:value2;...}
5.若值含有不止一个单词,则应加"",已定义一个整体;如p {font-family:"sans serif"}
6.含有多个属性值对时,通常写作如下:
    body {
      color:red;
      padding:10px;
      font-family: Georgia, Palatino, serif;
      }
7.CSS对大小写不敏感,但对于class以及id的获取是必须严格区分大小写的
  • CSS高级语法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            h1,h2,h3,p{
                color:green;
            }
        </style>
    </head>
    <body>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h1>标题1</h1>
        <h4>段落4</h4>
        <p>段落1</p>
    </body>
</html>
合并声明,对有相同样式的元素,可进行合并声明.
运行图片

相关文章

网友评论

      本文标题:01.CSS初体验

      本文链接:https://www.haomeiwen.com/subject/frbgattx.html