CSS基本用法介绍

Wesley13 等级 124 0 0
标签: csscss样式

CSS介绍

css定义如何显示HTML元素.

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染).

CSS语法

css实列

每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

css注释

/*这是注释*/

CSS的几种引入方式

行内样式

行内式是在标记的style属性中设定CSS样式.

<p style='color:red'>内联样式</p>

内部样式

嵌入式是将CSS样式集中写在网页的<head></head>标签里的<style></style>标签中.格式如下:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
   <style>
     p{ background-color: #2b99ff; }
   </style>
</head>

外部样式

外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可。推荐使用此方式。

<link href='mystyle.css' rel='stylesheet' type='text/css'/>

CSS选择器

基本选择器

元素选择器

p {color:red};

ID选择器

#i1 {background-color:red;}

类选择器

.c1 {
    font-size: 14px;
}

通用选择器

* {
    color:white;
}

组合选择器

后代选择器

li a{
    color:green;
}

儿子选择器

div>p{
    font-family: "Arial Black", arial-black, cursive;
}

毗邻选择器

div+p {
    margin: 5px;
}

弟弟选择器

#i1~p {
    border:2px solid royalblue;}
}

属性选择器

/*用于选取带有指定属性的元素。*/
p[title] { color: red; } /*用于选取带有指定属性和值的元素。*/ p[title="213"] { color: green; }


/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含(字符串包含)hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:*/
[title~="hello"] {
  color: green;
}

分组和嵌套

分组

当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。 格式如下:

div,p{color:red;}

上面的代码为div标签和p标签统一设置字体为红色.

嵌套

多种选择器可以混合起来使用,比如: .c1类内部所有p标签设置字体颜色为红色.

.c1 p { color:red;}

伪类选择器

first-letter

常用的给首字母设置特殊样式:

p:first-letter { font-size: 48px; color: red; }

before

/*在每个<p>元素之前插入内容*/ 
p:before { content:"*"; color:red; }

after

/*在每个<p>元素之后插入内容*/ 
p:after { content:"[?]"; color:blue; }

before和after多用于清除浮动。

选择器的优先级

CSS继承

继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

body { color: red; }

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

p { color: green; }

此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。

选择器的优先级

其实浏览器是按照不同选择器的权重来决定的,具体的选择器权重计算方式如下图:

CSS基本用法介绍

!important方式来强制让样式生效,但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

CSS属性相关

宽和高

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度,内联标签的宽度由内容来决定。

字体属性

文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。实例:

body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif }

字体大小

p { font-size: 14px; }

如果设置成inherit表示继承父元素的字体大小值。

字重(粗细)

font-weight用来设置字体的字重.

描述

normal

标准粗细

bold

粗体

bolder

更粗

lighter

更细

100~900

设置具体粗细,400等同于normal,而700等同于bold

inherit

继承父元素字体的粗细值,默认值,

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

  • 十六进制值 - 如: **#**FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如: red

还有rgba(255,0,0,0.3),第四个值为alpha, 指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间。

收藏
评论区

相关推荐

CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
如何提高CSS性能
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分,所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验,这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题,以及如何制作不妨碍人们使用的CSS的最佳实践。 目录 CSS是如何工作的?
2020 全球 CSS 报告,大家都在用什么样的技术?
本文来源与公众号「秋风的笔记」 介绍 -- CSS 从 1994 年 10 月首次被提出,到目前为止已经20余年,但是 CSS 早已发生了天翻地覆的变化,2020 的CSS  又是如何的呢? 我们现在可以使用 CSS Grid 轻松制作动态或响应式的布局,以更少的代码来进行自适应布局。CSS-in-JS 无需依赖全局样式表,我们可以将样式与组件写在一起
CSS
css垂直渐变   #example3        {         /\* fallback \*/         background-color:#063053;         /\* chrome 2+, safari 4+; multiple color stops \*/         background-image:-we
CSS
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。  浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width hei
CSS基本用法介绍
CSS介绍 ===== css定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 ===== ### css实列 每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 ### css注释 /*这是注释*/ CSS的几种引入方
CSS基础知识整理
### **1 什么是CSS?** CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。 CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。 ###
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的。请把”DIV+CSS”这个词从脑子中删除,用”xHTML+CS
CSS Font
CSS Font-Size: em vs. px vs. pt vs. percent =========================================== One of the most confusing aspects of CSS styling is the application of the **font-size** at
Less功能特性
(1)变量     我们常常在 CSS 中 看到同一个值重复多次,这样难易于代码维护 const bgColor="skyblue"; $(".post-content").css("background-color",bgColor); $("#wrap").css("background-color",bgColor);
Sass用法指南
学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。 很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preproces
Selenium2学习(六)
前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求。css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁。 这一篇css的定位方法,主要是对比上一篇的xpath来的,基本上xpath能完成的,css也可以做到。两篇对比学习,更容易理解。 一、css:属性定位     
记录Pdfh5的使用方法
import Pdfh5 from 'pdfh5'; import "pdfh5/css/pdfh5.css" export default data() return pafh5:null , mounted()