CSS -学习总结

小果一粒沙

于 2019-07-10 16:32:07 发布

阅读量184

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_35167821/article/details/95315866

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近看了很多关于如何学习的文章，无非就是要刻意练习，不断地回顾总结过去所学的文章，达到真正掌握知识的程度。

跟着 W3school 学习的CSS基础知识。

CSS基础教程总结

CSS简介

CSS是什么
优点
用来干啥的

CSS基本语法

声明的样式
引号使用
大小写

派生选择器
直系后代，子孙后代
id选择器
#id1 来表示一个id选择器
id属性是唯一的，如果有多个标签都使用同一个Id，则只有第一个标签生效。
会结合派生选择器使用
类选择器
.class1 来表示一个class选择器
结合派生选择器使用
属性选择器
就类似于[class=‘laguaHome’] 这样的属性选择器
里面可以1）只包含属性，2）包含属性还有属性值，属性确定的等于多少；属性中包含某个值（指定词汇）；属性中包含用连接符-；以def开头的属性值；以end结尾的属性值；属性值中间用空格分隔；等等…
有几种常见的选择器
同理结合派生选择器使用
实例：

//[title]
<p title="Hello School">W3school is a tutorial type website</p>
[title = 'W3School']
<p title="W3cshool">W3school is a tutorial type website</p>
//[title ~= 'hello']
<p title="hello school">W3school is a tutorial type website</p>
//[title |= 'hello']
<p title="hello-school">W3school is a tutorial type website</p>

CSS的创建
三种模式：
实例：

//例子内容来源于W3school, 我是搬运工：）
//外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
// mystyle.css is your css file.
//above statement is just like a statement.
</head>
//内部样式表
<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>
//内联样式
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

注：就js来讲，内联样式最高效，即将script代码放在body底部，不清楚css是否也有相似的性能。

下面会更新CSS文本、CSS框模型、选择器方面的内容。

CSS样式

CSS背景

background-color
background-image
background-repeat
background-position

CSS文本

缩进(indent)
对齐(align)
转换(tranform)
装饰(decoration)
空格-空白(space)

CSS字体

font-family
font-style
font-weight
font-size

CSS链接

a:link
a:visited
a:hover
a:active

3必须在12后面，4必须在3后面

CSS列表

list-style-type
list-style-image
list-style-position

CSS表格

Border
border-collapse
width & height
text-align
color
table-layout
:fixed

CSS框模型

概述 – 基本上的操作全部都是上右下左
top right bottom left
padding
上右下左
4种宽度大小定义方式：10px, 0.25em, 2ex, 20%
border
上右下左（以上下全部都是）
border-style
border-width
border-color
margin
上右下左
5种度量方式：px, in, mm, em, percentage
值复制
一个： 10px – 上右下左全部都是10（右，下复制上；左又复制右）
两个：10px 20px – 上下10，左右20（下复制上，左复制右）
三个：10px 20px 30px – 上10，右20，下30，左20（复制右）
margin 合并
总是取相对应的最大的大小值

CSS选择器

id选择器
只能够使用一次
class选择器
.class1来选择一个属性值为class1的元素
属性选择器
选择具有某个属性的元素可以选择多个属性 [title][href]
与h1或者p联合使用 – 选择属性值为title的a元素
属性值等于某具体值的元素
属性值中包含有某个元素(部分选择) – [class~=‘important’]
属性值中用-分开 – 特定属性选择器 – [lang|=‘en’]
属性值以某个元素开头 – a[abc^=‘begin’]
属性值以某个元素结尾 – a[abc$=‘end’]
属性值中包含某个字串的任一元素 – a[abc*=‘Arbitrarily’]
后代(descendant selector)
h1 p
子代选择器(child selector)
h1 > p
兄弟选择器(sibling selector)
h1 + p
// 这个地方不好懂
选择的一定是相邻的两个兄弟，比如li + li，有两个
```
<ul>
<li>I am a list</li>
<li>I am a list</li>
</ul>
```
只有第二个会被选择
伪类(pseudo class)
简单例子，之前讲述的链接a:link,a:visited,a:hover,a:activate就是最典型的伪类
:first-child
:lang
伪元素(pseudo elements)
:first-line
:first-letter
多重伪元素
:before – 元素前添加内容
:after – 元素后

小果一粒沙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS -学习总结

最近看了很多关于如何学习的文章，无非就是要可以练习，不断地回顾过去所学的文章，达到真正掌握知识的程度。跟着 W3school 学习的CSS基础知识。CSS基础教程总结CSS简介CSS是什么优点用来干啥的CSS基本语法声明的样式引号使用大小写派生选择器直系后代，子孙后代id选择器#id1 来表示一个id选择器会结合派生选择器使用类选择器.cla...
复制链接

扫一扫

专栏目录