CSS---介绍,语法,选择器,文本样式

1.什么是CSS,CSS是如何工作的

CSS是层叠样式表用来样式化和排版你的网页的,例如更改网页内容的字体、颜色、大小等等

当浏览器显示文档时,他必须将文档的内容与其样式信息结合,它分两个阶段处理文档,第一个是浏览器将HTML和CSS转化为DOM(文档对象模型),DOM把文档内容和其样式结合在一起,第二是浏览器显示DOM的内容。

2.CSS的基本语法是怎样的

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

            选择器通常是您需要改变样式的 HTML 元素。

            每条声明由一个属性和一个值组成。 属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开,分号;结尾。例如color:#fff;  文本颜色为白色

3.CSS选择器是什么概念,简单选择器和属性选择器是什么

选择器用于定位我们想要样式化的网页HTML元素。

简单选择器(Simple selectors):通过元素类型、class 或 id 匹配一个或多个元素。

属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素。

        属性选择器是一种特殊类型的选择器,它根据元素的 属性和属性值来匹配元素。它们的通用语法由方括号([]) 组成,其中包含属性名称,后跟可选条件以匹配属性的值。

·第一类存在和值属性选择器

[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。

[attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。

[attr~=val]:该选择器仅选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素,比如位于被空格分隔的多个类(class)中的一个类。

HTML文件


css文件


浏览器显示

·第二类子串值属性选择器

[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素(-用来处理语言编码)。

[attr^=val] : 选择attr属性的值以val开头(包括 val)的元素。

[attr$=val] : 选择attr属性的值以val结尾(包括 val)的元素。

[attr*=val] : 选择attr属性的值中包含字符串 val 的元素。


伪选择器(Pseudo-classes):匹配处于确定状态的一个或多个元素,伪选择器 。该选择器不是选择元素,而是元素的某些部分,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,或元素是DOM树中一父节点的第一个子节点。分为伪类和伪元素。

· 伪类(pseudo-class) 是一个以冒号(:)作为前缀的关键字,比如a:hover代表鼠标悬停在a标签上的样式是如何。


HTML文件


css文件


未点击之前


鼠标悬停

·伪元素前缀是两个冒号 (::) , 同样是添加到选择器后面去选择某个元素的某个部分。


伪元素



组合器(Combinators):这里不仅仅是选择器本身,还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如,你可以只选择divs的直系子节点的段落,或者直接跟在headings后面的段落。

A,B   匹配满足A(和/或)B的任意元素(参见下方 同一规则集上的多个选择器).

A B   匹配任意元素,满足条件:B是A的后代结点(B是A的子节点,或者A的子节点的子节点)

A > B    匹配任意元素,满足条件:B是A的直接子节点

A + B   匹配任意元素,满足条件:B是A的下一个兄弟节点(AB有相同的父结点,并且B紧跟在A的后面)

A ~ B   匹配任意元素,满足条件:B是A之后的兄弟节点中的任意一个(AB有相同的父节点,B在A之后,但不一定是紧挨着A)  

例如:


设计链接的样式,但是只针对ul无序列表中的链接有效;

设计ul列表里的链接样式,但是只当鼠标停留在上面时有效;

设计只紧接着最大标题下的段落样式。   

所以相关css文件:

css文件


浏览器显示


多用选择器(Multiple selectors):这些也不是单独的选择器;这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面, 以将一组声明应用于由这些选择器选择的所有元素。


多用选择器

4.文本样式都有哪些相关属性,对应哪些值

文本颜色:color,值有16进制的如:#fff;有rgb(255,0,255),有颜色的名称,如red

文本对齐方式:文本排列属性是用来设置文本的水平对齐方式。文本可居中center或对齐到左left或右right,两端对齐.当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。h1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}

文本修饰:text-decoration 属性用来设置或删除文本的装饰。从设计的角度看 text-decoration属性主要是用来删除链接的下划线:a {text-decoration:none;}

文本转换来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母,或每个单词的首字母大写。p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}

文本缩进用来指定文本的第一行的缩进。p {text-indent:50px;}


css中的文本样式属性
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,018评论 1 92
  • 引言 本人在慕课网学习HTML+CSS基础课程,记录一些文字,方便自己回忆,也希望对大家有所帮助 上次给大家带来了...
    zhaolion阅读 7,431评论 18 272
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 2,014评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,406评论 0 11
  • 一、CSS选择器常见的有几种? 基本选择器 通配选择器~选择文档中所有的html元素,用一个*表示 元素选择器~选...
    dengpan阅读 1,014评论 0 3

友情链接更多精彩内容