前端之CSS（一）

时间  2019-11-08
标签 前端 css 栏目 CSS 繁體版
原文   原文链接

1、什么是CSS

CSS是Cascading Style Sheets，层叠样式表，高大上的说法是用来控制网页数据的表现，可使网页的表现与数据内容分离。通俗来说，就是用各类盒子的堆叠实现咱们想要的HTML页面，武sir说招聘的时候都不说招前端，而是招div+css，我以为很贴切。css

2、CSS的引入

1.行内式html

<!--#行内式引用：-->
<p style="background-color: chartreuse">yinrufangshi1</p>
行内式是在单个标签的style属性中设定，并不能体现CSS的优点：减小代码量，so不推荐使用

2.嵌入式前端

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式以下：

<head>
     <style type="text/css">
            ...此处写CSS样式
     </style>
</head>
eg：
<!--#嵌入式引用：在head中定义style-->
 <style type="text/css">
        p{color: blue;background-color: azure;}
    </style>
<!--而后在body中调用-->
<p>yinrufangshi2</p>

3.导入式api

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法以下：
          <style type="text/css">
                    @import"mystyle.css"; 此处要注意.css文件的路径
         </style>

 4.连接式浏览器

也是将一个.css文件引入到HTML文件中    <link href="mystyle.css" rel="stylesheet" type="text/css"/> 注意：
导入式会在整个网页装载完后再装载CSS文件，所以这就致使了一个问题，若是网页比较大则会儿出现先显示无样式的页面，闪烁一下以后，再出现网页的样式。这是导入式固有的一个缺陷。使用连接式时与导入式不一样的是它会以网页文件主体装载前装载CSS文件，所以显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，而后再显示有样式的网页，这是连接式的优势。

优先级：标签（行内式）>页面镶入（嵌入式）>外部（导入式、连接式），这个仅限一样的样式冲突是才有用.字体

 3、CSS选择器

一、什么是选择器？url

“选择器”指明了{}中咱们定义的“样式”的做用对象，也就是“样式”做用于网页中的哪些元素。spa

 二、选择器的分类？code

  • 基础选择器
    • ‘*’：通用元素选择器，匹配任何元素。eg： * { margin:0; padding:0; }
    • E：标签选择器，匹配全部使用E标签的元素。eg：p { color:green; }
    • .info和E.info：class类选择器，匹配全部class属性中包含info的元素，info是自定义的名字。eg： .info { background:#ff0; }    p.info { background:blue; }
    • #info和E#info：id选择器，匹配全部id属性等于info的元素。eg：#info { background:#ff0; }   p#info { background:#ff0; }
  • 组合选择器
    • 多元素选择器：同时匹配多个元素，元素之间用逗号分隔。eg:div,p{color:#ddd;}
    • 后代元素选择器：匹配全部属于A元素后代的C元素，A和C之间用空格分隔。eg： 
      #aaa li { display:inline; }    li a { font-weight:bold; }

       

    • 子元素选择器：匹配A元素的全部子元素B，A和B之间用大于号分隔。eg： 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1>p{
            background-color: aqua;
            color: deeppink;
        }

        .main2>div{
            background-color: blueviolet;
            color: chartreuse;
        }
    </style>
</head>
<body>

      <div class="div1">hello1
          <div class="div2">hello2
              <div>hello4</div>
              <p>hello5</p>
          </div>
          <p>hello3</p>
      </div>
      <p>hello6</p>

<hr>

     <div class="main2">1
       <div>tina
           <div>
           </div>
       </div>
       <div>
           </div>
     </div>
</body>
</html>

       

    • 毗邻元素选择器：匹配全部同级元素又或兄弟元素。用加号链接。eg： p + p { color:#f00; } 
      .b+p {兄弟选择器，将同级的标签选择出来
       background-color: blue;
       font-size: 40px;
   }

       

  • 属性选择器
    • E[att]:匹配全部具备att属性的E元素，不考虑它的值。（E在此处能够省略，eg：p[title] { color:#f00; }或[title] { color:#f00; }）
    • E[att=val]：匹配全部att属性等于“val”的元素。eg：div[class=”error”] { color:#f00; }
    • E[att~=val]：匹配全部att属性具备多个空格分隔的值、其中一个值等于“val”的元素。eg：td[class~=”name”] { color:#f00; }
    • E[att|=val]：匹配全部att属性具备多个连字符（-hyphen-separated）分隔的值，其中一个值以val开头的E元素，主要用于lang属性，由于lang=en-us或en-gb等。eg：p[lang|=en] { color:#f00; }
    • E[att^=val]：匹配属性值以指定值开头的每一个元素。eg：div[class^="test"]{background:#ffff00;}
    • E[att$=val]：匹配属性值以指定值结尾的每一个元素。eg：div[class$="test"]{background:#ffff00;}
    • E[att*=val]：匹配属性值中包含指定值的每一个元素。eg：div[class*="test"]{background:#ffff00;}
    • p:before--->在每一个<p>元素的内容以前插入内容。 eg：p:before{content:"hello";color:red}
    • p:after--->在每一个<p>元素的内容以后插入内容。eg：p:after{content:"hello";color:red} 
      [class] {属性选择器，将clas的属性都选择出来
       background-color: blue;
   }
   [class='b'] {将class = 'b'的选择出来
       background-color: blue;
   }
   [class |='b'] {匹配具备连字符 - 的以b开头的class属性
       background-color: blue;
   }
   [class ^='b'] {匹配以b开头的class属性
       background-color: blue;
   }
   [class ~= 'c'] {匹配具备多个空格分隔的值、其中一个值等于'c'的class属性
       background-color: blue;
   }
   p:before {
       content:'666' ;
       color: blue;
   }

       

  • 伪类选择器(专用于控制连接的显示效果)
    • a：link（从未访问过的连接的崭新状态），用于定义了连接的常规状态。
    • a:hover（鼠标移动到连接上时未点击的悬浮状态），用于产生视觉效果。
    • a:visited（已访问过的连接的状态）用于阅读文章，能清楚的判断已经访问过的连接。
    • a:active（在连接上按下鼠标时的状态），用于表现鼠标按下时的连接激活状态。 
      <style type="text/css">
    a:link{
        color: red;
    }
    a:visited {
        color: blue;
    }
    a:hover {
        color: green;
    }
    a:active {
        color: yellow;
    }<!--注意顺序这4个伪类的顺序 lvha-->
</style>
</head>
<body>
    <a href="">hello-world</a>
</body>
</html>

4、CSS的经常使用属性

一、颜色属性orm

<div style="color:blueviolet">ppppp</div>

   <div style="color:#ffee33">ppppp</div>

  <div style="color:rgb(255,0,0)">ppppp</div> 

  <div style="color:rgba(255,0,0,0.5)">ppppp</div>

二、字体属性

font-size: 20px/50%/larger

font-family:'Lucida Bright'

font-weight: lighter/bold/border/

<h1 style="font-style: oblique">hello tina</h1>

 三、背景属性

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

      简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

              <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

注意：若是讲背景属性加在body上，要记得给body加上一个height，不然结果异常，这是由于body为空，没法撑起背景图片，另外，若是此时要设置一个width＝100px，你也看不出效果，除非你设置出html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            background-color: antiquewhite;
            
        }
        body{
            width: 100px;
            height: 600px;
            background-color: deeppink;
            background-image: url(1.jpg);
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>

</body>
</html>

四、文本属性

font-size: 10px;

text-align: center;横向排列

line-height: 200px;文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

p

{ width: 200px;

height: 200px;

text-align: center;

background-color: aquamarine;

line-height: 200px; }

text-indent: 150px; 首行缩进，50%：基于父元素（weight）的百分比

letter-spacing: 10px;字母间距

word-spacing: 20px;单词间距

direction: rtl;从右向左，默认是从左向右

text-transform: capitalize;首字母大写

五、边框属性

border-style: solid;dashed;dotted

border-color: chartreuse;

border-width: 20px;

简写：border: 30px rebeccapurple solid;

 六、列表属性

ul,ol{

　　    list-style: decimal-leading-zero; 0开头的数字标记。(01, 02, 03, 等。)
        list-style: none;<!--!!!重点，作轮播图时经常使用到，将列表前面的圈去掉-->　　　　　　　
　　　   list-style: circle;　　　　　　　  标记是空心圆
        list-style: upper-alpha;　　　   大写字母
        list-style: disc;　　　　　　　　默认。标记是实心圆

 七、display属性

display的用法：
<!--display 为none将隐藏标签-->
    <div style="display: none;">tina</div>

    <!--display 为inline会将块级别标签调为内联标签-->
    <div style="display:inline">tina</div>

    <!--display 为block会将内联标签调为块级别标签-->
    <a style="display:block">tina</a>

 5、后序

小插曲：
当咱们在pycharm执行css代码时，建议找到文件所在位置，右键，选择浏览器执行，避免IDE错误

@注：下篇将会详细补充盒子模型、float、position的用法及inline&block的因缘纠葛，敬请期待~(*^__^*) ~……

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程