CSS（待添加）

2018-05-31  本文已影响0人  蔡华鹏

CSS（待添加）

css的相关类容比较多，准备分几个模块写

css简介

什么是css
css（cascading style sheets）是用来为网页添加样式的代码

例如：

p {
    color: red;
    width: 50px;
    border: 1px solid black;
   }

上面代码，p是我们选中的元素，意思我们将对p元素添加样式，里面的内容是我们的样式代码，然后用{}包裹样式代码

再举一例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>蔡华鹏的博客</title>
  </head>
  <body>
    <h1>css 简介</h1>
    <p>我们怎么学习css</p>
  </body>
<html>
/*style.css*/
h1 {
      color: red;
      }
p {
    color; blue;
   }

上面代码中css的功能就是<h1>标签里的字体颜色变成红色，p标签里的字体颜色变为蓝色

看看css的工作原理：
[图片上传失败...(image-c0142a-1527749256671)]
参考链接

css的应用方式

外部样式表（比较推荐）

1、通过<link>引入scc，如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>CSS</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <h1>Hello CSS!</h1>
</body>
</html>

2、通过@import引入样式，放入css中（注意：不要忘记分号）

<style>
@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') screen and (orientation:landscape);
</style>

内部样式表

将css放在页面的<style>元素中，如：

<style>
  h1 {
        background: red;
       }

内联样式（不推荐，但在有些情况下很有用）

<p style="background: blue; font-size: 12px;>css hello</p>

属性样式（废弃）

<img src="图片地址" width=12 height=12>

参考链接

css选择器

CSS 选择器用于定位我们想要给予样式的 HTML 元素

选择器类型

基础选择器

选择器 含义
* 通用元素选择器，匹配页面任何元素（这也决定了我们很少用）
#id id选择器，匹配特定id元素
.class 类选择器，匹配class包含（不是等于）特定类元素
element 标签选择器

用法：

* {
  box-sizing: border-box;
}

通用选择器，匹配页面所有元素

<p id="notification">通知：明天放假</p>
#notification {
  font-size: 24px;
}

id选择器，以上代码匹配id为notification的元素

  <li class="first done">起床</li>
  <li class="second done">刷牙</li>
  <li class="third">洗脸</li>
</ul>
.first {
  font-weight: bold;
}

.done {
  text-decoration: line-through;
}

类选择器，一个 CSS 类可以应用到多个不同的元素，一个元素也可以应用多个不同的 CSS 类

p {
  color: red;
}

div {
  color: blue;
}

标签选择器，以上代码匹配标签为p和标签为div的元素

组合选择器

选择器 含义
E,F 多元素选择器，用,分割，同时匹配元素E或元素F
E F 后代选择器，用空格分离，匹配E元素所有的后代（不只是子元素，子元素向下递归）元素F
E>F 子元素选择器，用>分离，匹配E元素的所有直接F元素
E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素
E~F 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻于否）
.class1.class2 匹配同时拥有class1和class2的元素，连写的时候中间没有分隔符号,，.和#本身充当分隔符元素

属性选择器

选择器 含义
E[attr] 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
E[attr=value 匹配属性attr值为value的元素，div[id=text]，匹配id=text的div
E[attr~=value 匹配所有属性attr具有多个空格分隔，其中一个值等于value的元素
E[^=value 匹配属性attr的值以value开头的元素
E[$=value 匹配属性attr的值以value结尾的元素
E[*=value 匹配属性attr的值包含value的元素
E[attr|=val]

伪类选择器

选择器 含义

伪元素选择器

选择器 含义
E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容

css优先级

从高到低分别是
1、在属性后面使用!important会覆盖页面内任何位置定义的元素样式
2、作为style属性写在元素标签上的内联样式
3、id选择器
4、类选择器
5、伪类选择器
6、属性选择器
7、标签选择器
8、通配选择器
9、浏览器自定义

一篇漂亮的网页，需要css去渲染它。所以要学会使用css去操作出自己需要的样式，在学会操作样式之前要知道一些元素的特性，方便于达到自己想要的结果

块级元素和行内元素

block-level 如：

div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th .....

inline-level

em strong span a br img button input label select textarea
code script

宽高

只对块级元素设置生效，对行内元素设置无效

在网页中，我们会看到有些类容被边框包围，那么我们来了解一下边框。同时，我们还可以利用边框去做一些好看的形状

边框（border）

h1 { 
    border-width: 8px;
   }

h1 {
   border-color: red;
  }

h1 {
   border-style: solid;     /*dotted dash*/
  }

h1 {
   border-radius: 8px;
  }

边框简写

.box {
      border: 5px dotted #ccc;
     }

使用边框做三角形

<div class="triangle"></div>


.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid deepskyblue;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}

在学习后面内容时，我们要先了解一下元素的和模型结构

盒模型

padding

margin

-margin代表外边距，有四个方向的值，可以合写，值可以是数值，也可以是百分比（相对于父容器不是本身），还可以是负值

margin: 0 auto
对于块级元素设置margin: 0 auto;可达到剧中的目的

文本样式

font

文本

行内元素居中

<style>
  .box {
    text-align: center:
  }
</style>

**单行文本溢出加、、、

上一篇下一篇

猜你喜欢

热点阅读