1.什么是css？

简单的来说css就是配合HTML的，HTML主要负责页面的结构，css就像一个美容师，主要负责页面的美化。

2.css的样式

css的样式有三种：行内样式  内部式  外部链接式

行内样式：顾名思义就是在行内写，就是在标签内部写，通过style=“”属性来写，

内部式：就是把css和HTML写在一个页面上，我们一般写在<head>标签里面同样通过<style></style对标签来写

外部链接式：就是在外面新建一个css文件夹，然后在<head>标签中通过<link rel="stylesheet" href="css.css" />链接过来{一定要记住不要写在<style></style>对标签中，也可以理解为用外部链接式写css不需要用到style对标签}

2.1 css背景

css背景颜色 background-color 可以规把元素的背景设置成你想要的颜色

背景图片 background-image：url（图片路径）可以把你想要的的图片设置为你想要的背景图片，但是设置的背景图片要视情况而定一般你设置的背景图片都会平铺（这不是绝对的）你可以用background-repeat：no-repeat；（不平铺）可以通过这个来改变 ，还有比如cover覆盖 contain将图片等比放大 background-attachment：scroll；将背景图片设置为随滚动条而动 fixed；不随滚动条而动。background-position改变图片的位置 有x.y  x轴平移是右＋左- center，y轴是下＋上- center 它们具体值是px或%

 

css的文本：我们可以通过文本来改变字体颜色  文本水平对齐等（我主要说一下我们比较常见的几种，其实还有 字符间距 装饰文本  对文本进行缩进 ）

改变字体颜色 ：直接在文本中设置color就可以了

文本水平对齐：text-align：值 left、right 和 center 会使元素中的文本分别左对齐、右对齐和居中。

css字体：有什么宋体 软体雅黑等等。

font-style字体风格

normal - 文本正常显示

italic - 文本斜体显示

oblique - 文本倾斜显示

font-size字体大小值是px 一般我们会用14px

font-weight字体粗细（<h1>to</h6>也可以设置）

css链接：

当为链接的不同状态设置样式时，请按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后

a:active 必须位于 a:hover 之后

css轮廓：

前面的这些css样式是比较简单和容易掌握的。

3.现在介绍得是css中最经典的部分，也是相对而言比较难的部分，我自己认为写法都还好最重要的是看语法

3.1首先我们来看css选择器

CSS选择器：元素选择器；最常见的css选择器就是元素选择器，换句话说，文档的元素就是最基本的选择器。就比如p a h1等这样的标签

内选择器：类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

<body>

<h1 class="important">

This heading is very important.

</h1>

<p class="important">

This paragraph is very important.

</p>
</body>

语法：.important{ 在这里面写样式}记住css选择器的语法，前面是点千万不要写错了

ID选择器   ：在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别，首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号

<p id="intro">This is a paragraph of introduction.</p>
#intro{}一定记住语法不要和css选择器的语法记混了

属性选择器：属性选择器可以根据元素的属性及属性值来选择元素。如图：

后代选择器：后代选择器可以选择作为某元素后代的元素。

<html>
<head>
<style type="text/css">
h1 em {color:red;}
</style>
</head>

<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>

子元素选择器：与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>

<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>

相邻兄弟选择器：相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head>

<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>

伪类：伪类用于向某些选择器添加特殊的效果。

获取第一个子元素的 p 元素：

<html>

<head>

<style type="text/css">

p:first-child {

  color: red;

  }

</style>

</head>

<body>

<p>some text</p>

<p>some text</p>

</body>

</html>
CSS 类也可与伪类搭配使用
伪元素：有一曲同工之妙

css样式的介绍的更多相关文章

  1. style、currentStyle、getComputedStyle(不同浏览器获取css样式)区别介绍

    style.currentStyle.getComputedStyle区别介绍   样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样 ...

  2. CSS样式表介绍

    一.    CSS中的样式选择 1)内样式(内联样式) style=””; 2)内嵌样式 <style type="text/css"></style> 3 ...

  3. CSS样式继承性

    CSS样式继承介绍 外层元素身上的样式会被内层元素所继承. 当内层元素身上的样式与外层的元素身上的样式相同时内层元素样式会覆盖外层元素样式. 并不是所有的样式都能够继承,只有文本与字体样式属性才能够被 ...

  4. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  5. css样式介绍

    1 css之选择器 1.1 基本选择器 1.2 组合选择器 E,F      多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔:div,p { color:#f00; } E F     ...

  6. Confluence 6 使用 CSS 样式化 Confluence 的介绍

    这个页面对 Confluence 通过修改 CSS 来改变外观和感觉的情况进行了说明. 层叠样式表(Cascading Style Sheets (CSS))是对 Web 页面进行样式化的工业化标准. ...

  7. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

  8. CSS样式自动换行(强制换行)与强制不换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

  9. CSS样式----图文详解（二）：css属性

    主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 ...

随机推荐

  1. SpringAOP(注解方式实现面向切面编程)之常用Before、After、Around

    一.首先在Springmvc.xml文件中引入如下内容(本示例是在ssm框架基础上实现的) 1.引入命名空间 xmlns:aop="http://www.springframework.or ...

  2. "echo 0 /proc/sys/kernel/hung_task_timeout_secs" disable this message

    问题现象: 问题原因: 默认情况下, Linux会最多使用40%的可用内存作为文件系统缓存.当超过这个阈值后,文件系统会把将缓存中的内存全部写入磁盘, 导致后续的IO请求都是同步的. 将缓存写入磁盘时 ...

  3. Node接口实现HTTPS版的

    最近由于自己要做一个微信小程序,接口地址只能是https的,这就很难受了 于是乎,我租了个服务器,搞了个免费的ssl认证 可是呢,我不会搞https接口怎样实现 今天特意花了一天时间来学,来学习 &q ...

  4. 在vue-cli3中使用axios获取本地json

    在vue-cli3中,公共文件夹由static变成了public 先把要访问的json放到public文件夹下 使用axios的get方法获取,不能用post,不然会报404 axios..json` ...

  5. 第一篇：C++之hello world

    1.编辑器:Microsoft Visual C++ 2010,下载安装 2.新建项目 代码: #include <iostream>#include <Windows.h>/ ...

  6. java之this关键字和super关键字的区别

    编号 区别点 this super 1 访问属性 访问本类中的属性,如果本类没有此 属性则从父类中继续查找 访问父类中的属性 2 调用方法 访问本类中的方法 直接访问父类中的方法 3 调用构造器 调用 ...

  7. js中获取当前url路径

    可以使用 window.location 获取当前页面url.以下是一些简单应用. <script> $(function(){ // 返回 web 主机的域名,如:http://127. ...

  8. 创建多进程之multiprocess包中的process模块

    创建多进程之multiprocess包中的process模块 1.process模块是一个创建进程的模块 Process([group [, target [, name [, args [, kwa ...

  9. GROUP BY中的WITH CUBE、WITH ROLLUP原理测试及GROUPING应用

    前几天,看到一个群友用WITH ROLLUP运算符.由于自个儿没用过,看到概念及结果都云里雾里的,所以突然来了兴趣对生成结果测了一番. 一.概念: WITH CUBE:生成的结果集显示了所选列中值的所 ...

  10. (转)Python- sklearn之最小二乘法

    最小二乘法:https://baike.baidu.com/item/%E6%9C%80%E5%B0%8F%E4%BA%8C%E4%B9%98%E6%B3%95/2522346?fr=aladdin ...