CSS总结(一)

时间:2019-09-24
本文章向大家介绍CSS总结(一),主要包括CSS总结(一)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

css的三种书写方式

  • 行内样式

    <div style="color: pink;">熊二</div>
  • 内嵌样式

    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
       div {
          color: blue;
          }
      </style>
    </head>
  • 外联样式(外链样式)

    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <link rel="stylesheet" href="样式.css">
    </head>
    <body>
      <div>熊大与熊二</div>
    </body>

颜色属性

颜色的值的三种表示方式

  • 使用表示颜色的单词

  • 十六进制表示法 0-9 a-f color: #nn nn nn; n的取值:0-9, a-f (推荐使用)

    注意:当每两位相同的时候可以简写成三位

  • rgb表示法 rgb(n,n,n) n的取值: 0-255

color: red;
color: #00ab22;*/
color: rgb(255,0,0);*/

字体属性

font-size:设置字体大小

font-style:设置字体样式

font-weight:设置字体粗细

font-size: 100px;

font-style: italic;   /*设置字体倾斜*/

font-weight: bold; /*加粗字体*/
font-weight: bolder;/*更粗字体*/
font-weight: lighter;/*细字体*/
font-weight: 100;  /*注意:font-weight的值设置的是数字的时候,一定不要带单位*/

字体属性简写:

/*写法:*/
font: font-style font-weight font-size font-family;
/*示例:*/
font: 600 italic 50px 'simsun'

注意:
1.font简写的时候font-size和font-family一定要写,而且位置必须是font-size在前font-family在后

​ 2.font-style和font-weight的位置可以变,但是只能在 font-size的前面。而且可有可无

文本相关属性

文本水平居中

text-align: center;
/*text-align: right;*/
/*text-align: left;*/

如果元素的宽度不是由内容决定,设置其中的文本的水平位置,给这个元素本身设置text-align属性即可一行显示多个或者是宽度由内容决定的元素,设置其文本的水平位置,我们需要给其父元素设置text-align属性

文本首行缩进

/* px:一个单位: em:相对长度单位*/
text-indent: 80px;     
text-indent: 2em;

文本修饰线

text-decoration: underline;  /* 下划线*/
/*text-decoration: overline; 上划线*/
/*text-decoration: line-through;  中划线*/

text-decoration: none;去除文本修饰线

css中选择器

  • 基础选择器(简单选择器)
    • 标签选择器
    • 类选择器
    • id选择器
    • 通配符选择器(通用选择器)
  • 复合选择器(将标签选择器、类选择器、id选择器通过一定的规则组合起来的新的选择器)
    • 后代选择器
    • 子代选择器
    • 并集选择器
    • 交集选择器

标签选择器

将标签名作为选择器的名称,标签选择器会选择页面上所有的这一类标签

  <style>
    h1 {
      color: pink;
    }
    div {
      color: blue;
    }
  </style>

类选择器

类选择器的特点:

​ 1.一个元素可以同时拥有多个类名

​ 2.一个类可以被多个元素同时使用

作用范围:在页面上拥有这个类名的元素

.pink {
  color: pink;
}
.blue {
  color: blue;
}
.font {
  font-size: 50px;
  font-weight: 600;    /*skyblue*/
}

id选择器

 #one {
      color: blue;
    }

注意:在一个页面上有且只能有一个叫这个id名字的元素,简单来说就是页面的id属性的值不能重复
一般不推荐使用id选择器,id一般都是在js中使用的最多*

通配符选择器

* {
  color: pink;
}

通配符选择器会选择器页面上所有的元素都设置相同的样式
注意:一般不推荐使用,一般都是在css初始化的使用
css的初始化:去除浏览器默认给到元素的样式的过程

后代选择器

.father span {
      color: pink;
    }

子代选择器

.father>span {
      color: green;
}

注意:子代选择器只能选择直接子元素(只能选择儿子这一代)

并集选择器

div,span,.one,a {
  color: pink;
  font-size: 50px;
 }

交集选择器

p.one {
      color: pink;
      font-size: 100px;
}

注意:使用交集选择器的时候,如果存在有标签选择器,标签选择器一定要写在前面

伪类选择器

链接伪类选择器:

:link (链接 ) 只对a标签有效
:visited (已经被访问了) 只对a标签有效
:hover (悬停) 对所有的元素有效
:active (激活) 对所有的元素有效

span:hover {
   color: purple;
 }

目标伪类选择器:

当带点击a标签时,此时页面会滚动条会定位到id为对应的id的段落处,此时的目标就是h3,或者h2,当点击哪一个连接时候对应id的元素就会被选中。

  <style>
     /*target {
      属性:属性值;
     }*/
     h3:target {
      color:  pink;
      font-size: 30px;
     }
  </style>
<body>
  <ul>
    <li><a href="#personInfo">个人信息</a></li>
    <li><a href="#childLife">早年经历</a></li>
  </ul>
  <h3 id="personInfo">个人信息</h3>
  <p>张钧甯(Ning Chang),1982年9月4日出生于德国,毕业于台湾中央大学产业经济研究所法律组硕士班,华语影视女演员。
2002年,张钧甯参演个人出道作品《流星花园Ⅱ》。2006年,因主演医疗剧《白色巨塔》而被观众熟知 [1]  。2008年,张钧甯凭借伪纪录片《情非得已之生存之道》获得第10届台北电影节最佳女演员奖。2009年,她主演的警匪剧《痞子英雄》在台湾播出。2013年,凭借爱情剧《最美的时光》获得更多关注 [2]  。
2014年,主演警匪片《痞子英雄:黎明升起》 [3]  。2015年,凭借古装剧《武媚娘传奇》获得时尚星秀人物盛典度最具突破女演员 [4]  ;同年,由其主演的武侠剧《少年四大名捕 》在湖南卫视首播 [5]  。2016年,她出演了宫斗剧《如懿传》 [6]  。2017年,主演民国传奇女性剧《女管家》 [7]  与青春爱情电影《六人晚餐》相继上映 [8]  。2018年,主演都市情感剧《温暖的弦》 [9]  ,凭借《虎啸龙吟》获第24届华鼎奖中国百强电视剧最佳女配角 [10]  。</p>
<h2 id="childLife">早年经历</h2>
<p>张钧甯出身于书香门第。在德国慕尼黑出生,成长于台湾。2000年,十八岁的她考入台北大学历史系,大二转入法律系就读。随后,她在一次西门町逛街时,接受工读生的邀请填写问卷,几个月后工读生成为艺人经纪助理时想到充满学生气息的张钧甯,她便在这机缘巧合下进入了演艺圈。起初,她以拍摄音乐录音带及广告为主 [11-12]  。</p>
<body>

结构伪类选择器:

从HTML的结构上去选择元素。

语法:

选择器:first-child   选择第一个子元素

选择器:last-child  选择最后一个子元素

选择器:nth-child(n)    n:表示的是选择的是第几个子元素(只看元素的位置和元素本身无关)

选择器:nth-last-child(n) n:表示的是选择的是第几个子元素(只看元素的位置和元素本身无关)  从后往前数

常用方法:

/**选择第一个li元素和最后一个li元素**/   
li:first-child {
      color: pink;
      font-size: 20px;
     }
     li:last-child {
      color: pink;
     }
    li:nth-child(1),li:nth-child(2) {
      color: blue;
    }
    /**选择第奇数或偶数个元素**/
   li:nth-child(2n+1) {
      color: pink;
      font-size: 50px;
    }
    li:nth-child(odd) {
      color: pink;
    }
    li:nth-child(even) {
      color: blue;
    }
   .one li:nth-child(2n) {
      color: pink;
    }
/**选择第二个div元素**/
   div:nth-child(2) {
      color: blue;
    }
/**选择父ID为boxx的第四个div元素**/
    .boxx p:nth-child(4) {*/
        color: pink;
    }
/**选择第四个p元素**/
    .p:nth-child(4) {
      color: pink;
    }

元素常见的三种显示方式

  • 行内元素
  • 块级元素
  • 行内块级元素

行内元素

行内元素:   display:inline

特点:
    1.一行可以显示多个
    2.大小由内容决定
    3.不能设置有效宽高

常见行内元素: span、em、a、img

img是一个特殊的行内元素,可以设置有效宽高

块级元素

块级元素:  display:block

特点:
    1.独占一行
    2.可以设置有效宽高
      
常见的块级元素:  h1-h6、p、div、ul、li、ol、dl、dt、dd

行内块级元素

行内块级元素:   display:inline-block
特点:
    1.一行可以显示多个
    2.可以设置有效宽高
常见的行内块级: input、textarea、select

原文地址:https://www.cnblogs.com/chen88/p/11577921.html