CSS(待添加)

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)]
参考链接

  • cssreference.io/
  • CSS reference
  • CSS basics
    我们现在知道了,什么是css,css会有怎样的效果以及css的工作原理,那么我们现在需要去知道怎么引用css,和怎么去选择元素,以及怎么去运用scc

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=textdiv
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);内联(inline-level)
  • 块级可以包含块级和行内,行内只能包含文本和行内
  • 块级占据一整行空间,行内占据自身宽度空间
  • 高宽设置、内外边的差异

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)

  • border-width

  • border-color

  • border-style

  • border-radius

  • border-width
    设置边框的宽度

h1 { 
    border-width: 8px;
   }
  • border-color
    设置边框颜色
h1 {
   border-color: red;
  }
  • border-style
    设置边框的样式
h1 {
   border-style: solid;     /*dotted dash*/
  }
  • border-radius
    用于给元素添加圆角
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

  • padding代表内边距,有四个方向的值,可以合写,值可以是数值,也可以是百分比(相对于父容器不是本身)
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

margin

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

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

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

文本样式

font

  • font-size: 字体大小
  • font-family: 字体,宋体,微软雅黑,Arial等
  • font-weight: 文字粗度,常用的就是默认值regular和粗体bold
  • font-height: 行高,可以用作百分比,倍数或者固定尺寸
  • 以上属性都可以继承个子元素

文本

  • text-align: 文本对其方式left、center、right、justify
  • text-indent: 文案第一行缩进距离
  • text-decoration: none、underline、line-through、overline
  • color: 文字颜色
  • text-transform: 改变字体大小写none、uppercase、lowercase、capitalize
  • text-spacing: 可以改变字(单词)之间的标准间隔
  • letter-spacing: 字母间隔修改的是字符或字母之间的间隔

行内元素居中

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

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,015评论 1 84
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 9,686评论 0 33
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 3,421评论 2 64
  • CSS 指层叠样式表(Cascading Style Sheets),是一种用来为结构化文档(如 HTML 文档或...
    神齐阅读 447评论 0 14
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    hiuman阅读 183评论 0 1