CSS基础

作者: 夜阑w | 来源:发表于2018-11-25 19:16 被阅读0次

一、引入CSS的方式

内联式、嵌入式和外链式

1.内联式

<p style="color:red">paragraph</p>

2.嵌入式

<style type="text/css">
    p {
      background-color: #00539F;
      font-size: 2em;
      text-align: center;
    } 
</style>

3.外链式

<link rel="stylesheet" type="text/css" href="style.css">

二、CSS选择器

简单选择器

1.通配选择器

通配选择器可以匹配所有元素。下面的代码可以去掉默认的margin。

* {
  margin: 0;
}

2.标签选择器

使用标签进行选择，选中所有的该标签，一般用于语义标签和组合选择器。

p {
  font-size:12px;
}

3.id选择器

为标签设置id="ID名称"，选择时使用#id选择器名称 {css样式代码;}

4.类选择器

为标签设置class="class名称"，选择时使用.class选择器名称｛css样式代码；｝

注意：class选择器与id选择器的区别：一个元素可以有多个class名称，一个class名称也可以被多个元素使用，但id选择器不可以，它是唯一的。另外id选择器的优先级要大于class选择器。

属性选择器

多用于input标签。
input[name] {}：选中所有具有name属性的输入框。
input[type="password"]：选中所有类型为“密码”的输入框。
input[title~="flower"]：选中title属性包含单词 "flower" 的所有元素，属性中各个单词以空格分隔。
input[title*="demo"]：选中title属性包含“demo”的所有元素。
input[title^="demo"]：选中title属性以“demo”开头的所有元素。
input[title$="demo"]：选中title属性以“demo”结尾的所有元素。

伪类选择器

a标签
a:link {}：选中未访问过的链接。
a:visited {}：选中已访问过的链接。
a:hover {}：鼠标移到链接上的样式。
a:active {}：鼠标在链接上按下时的样式。
a:focus {}：获得焦点时的样式。

伪元素

E:first-line {}：匹配E元素的第一行
E:first-letter {}：匹配E元素的第一个字母
E:before {}：在E元素之前插入生成的内容
E:after {}：在E元素之后插入生成的内容

组合选择器

h1,p {}：同时为一组选择器定义样式。

直接组合EF

p.warning { color: orange; }

后代组合E F

选中article标签下的所有p元素

article p{
  color:red;
}

亲子组合E > F

选中article标签下的第一代p元素article > p {}
注意： 亲子选择器与后代选择器的区别是后代选择器可以选中所有子代，亲子选择器只选择第一代子代。

其他选择器

选中id="introduction"下的第一个p标签：

.introduction p:nth-of-type(1) {
    color: blue;
}

三、层叠与继承

特异度级别

内联：1000；id选择器：100；类、伪类：10；标签选择器、伪元素：1；

样式的的覆盖规则

根据引入方式：优先级由高到低依次为：“内联属性”——>“嵌入”——>“外链”。
按照特异度排序，后面的优先级高。
特异度一样时，按照样式书写顺序，后面的优先级高。
加有“！important”的样式，优先级最高：即无论哪一种情况，只要在样式上加了important,那么该样式的优先级最高。

关于继承

继承，就是父元素的规则也会适用于子元素。
对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。

四、文本样式

font-family：字体设置
font-size：文字大小，可使用px，百分比等作为单位，取值也可为绝对值small和相对值smaller等。
font-style：斜体设置。取值可为normal、italic、oblique。
font-weight：文字的粗细程度，粗体为bord。
line-height：元素所属的行所占的高度，段落文字一般取值为1.4~1.8。也可用于竖直方向的居中。
text-align：文本在容器内的对齐方式（水平）。
vertical-align：竖直方向的对齐方式。
font缩写：font的众多属性可以集中在一条属性中写

h1 {
    /* 斜体 粗细 大小/行高 字体族 */
    font: italic bold 20px 'Times New Roman';
}

其他样式：

将字母变为首字母大写：p {text-transform: capitalize;}（大写、小写同理）
去掉超链接默认的颜色、下划线等样式：a {text-decoration: none;}
去掉无序列表前的实心原点：li {list-style: none;}
设置背景为图片：background-image: url("");
设置背景图片不重复：background-repeat: no-repeat;
设置背景位置：background-position: 10px;
设置图像分不透明度：img {opacity: 0.6;}

五、盒模型

margin:外边距； border:边框； padding:内边距；content:内容
盒模型中的width和height是content box的宽度
对于margin、border、padding，均可为其设置top right bottom left的值，也可以进行缩写。
边框样式border-style的取值有none | solid | dashed | dotted | double。
设置边框圆角：border-radius: 5px;
表格边框线合并：border-collapse: collapse;

六、CSS布局

注：可以使用百分比宽度进行布局。

使用inline-block

vertical-align 属性会影响到 inline-block元素，你可能会把它的值设置为 top。
需要设置每一列的宽度。
如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙。

position

static（默认）、relative、absolute、fixed、sticky、inherit
绝对定位（absolute）：不占据常规流位置，相对于包含块进行偏移（包含块为最近一级外层元素position不为static的元素）
相对定位（relative）：相对于之前常规流位置发生偏移，原先位置仍然占据
固定定位（fixed）：相对于视窗进行定位，不再占有常规流位置

浮动（float）

浮动元素会从常规流中脱离，漂浮在容器(包含块)左边或右边
清除浮动：clear

常用的三栏布局方式

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    .middle {
      width: 100%;
      float: left;
    }
    .main {
      margin: 0 200px;
      height: 400px;
      background: pink;
    }
    .left {
      width: 200px;
      height: 200px;
      float: left;
      background: blue;
      margin-left: -100%;        
    }
    .right {
      width: 200px;
      height: 200px;
      float: left;
      background: yellow;
      margin-left: -200px;                      
    }
    * {
      font-family: 'Courier New', Courier, monospace;
      font-size: 20px;   
    }
  </style>
</head>

<body>
  <div class="middle">
    <div class="main">ffffff</div>
  </div>
  <div class="left">side1</div>
  <div class="right">side2</div>
</body>

</html>

七、常用的居中方式

水平居中

行内元素：对父元素设置text-align:center;
定宽块状元素：设置左右margin值为auto;
不定宽块状元素：设置子元素为display:inline,然后在父元素上设置text-align:center;
通用方案：flex布局，对父元素设置display:flex;justify-content:center。

垂直居中

父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
父元素一定，子元素为多行内联文本：设置父元素的display: inline-block，再设置vertical-align: middle;
块状元素：设置子元素position:absolute 并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;
通用方案：flex布局，给父元素设置{display:flex; align-items:center;}。

网友评论

本文标题：CSS基础

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

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！