CSS简单个人学习笔记--上
1. CSS简介
构成： 选择器 + 样式的声明（属性与值，键值对）
属性与值之间，冒号分割
CSS补充在<head>写在<style>内
<style>
/*在内修改样式*/
p {
/*修改针对p的样式*/
color: red;
/*修改了文字的颜色*/
font-size: 20px;
/*修改文字字体，像素比加px*/
}
</style>
2. CSS基础选择器
选择器的作用： 选择不同的标签。
选择器的分类：基础选择器，符合选择器。
基础选择器：标签选择器，类选择器，id选择器，通配符选择器。
2.1 标签选择器
根据HTML的通配符进行选择。<div> <p>等
优点： 选择快速，全面
缺点： 无差异化
代码略，参考上述第一部分代码。
2.2 类选择器
单独选择一个，或某几个标签进行选择
似乎：类选择器的优先级高于基础选择器？
<style>
/*在内修改样式*/
.red {
/*选择所有定义为红色的类*/
color: red;
}
p {
/*修改针对p的样式*/
color: blue;
/*修改了文字的颜色*/
font-size: 20px;
/*修改文字字体，像素比加px*/
}
</style>
</head>
<body>
<p class="red">这是第一个CSS测试段落</p>
<!--划入red类-->
<p>这是第二个CSS测试段落</p>
<p>这是第三个CSS测试段落</p>
<ul>
<li class="red">列表1</li>
<!--划入red类-->
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
2.2.1 类选择器——多类名
给class属性赋予多个类型， 使用空格分开
类选择器针对单类名处理
<head>
<style>
.red {
/*选择所有定义为红色的类*/
width: 200px;
height: 200px;
background-color: red;
}
.green {
/*选择所有定义为红色的类*/
width: 200px;
height: 200px;
background-color: green;
}
.width-resize {
/*重设宽度*/
width: 100px;
}
</style>
</head>
<body>
<!--默认绿和红均为正方形-->
<div class="red width-resize"></div>
<div class="green width-resize"></div>
<!--对width-resize类重设宽度-->
<div class="red"></div>
</body>
2.3 ID选择器
HTML 设置id="XX"属性
CSS 使用#id设置
只能调用一次 第一个出现的id才能调用id，之后的无法调用id（似乎是针对JS来讲，事实可以调用多次）
因为JS通过查询id进行唯一性操作。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
#red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<p class="green" id="red">第一个id选择器测试</p>
<p id="red" class="green">第二个id选择器测试</p>
</body>
2.4 通配符选择器
对于全部标签进行设置，使用*进行设置
<style>
* {
/*全部设置为blue*/
color: blue;
}
</style>
3. CSS字体属性——字体、大小、粗细、样式
字体，大小，粗细，样式等
- 字体：
font-family根据预设顺序进行查找，查到就用。最好写在<body>中 - 标题：
font-size对于<body>的设置对标题无效，标题需要独立设置大小 - 字体粗细：
font-weight，存在normal标准400，bold粗体700，lighter细体，或者数字设置。同样，标题不受<body>的设置影响，单独设置 - 设置斜体
font-style设置斜体，normal标准，italic斜体 - 复合设置
font必须按照顺序，斜体，加粗，大小，字体设置。至少保留font-size和font-style
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
.fontf {
/*设置字体*/
/*依设置的顺序查找，找到了就用*/
/*最好还是写在body中*/
font-family: 'Mircrosoft Yahei', Times, serif;
}
.size {
/*设置字体大小 默认为16px*/
font-size: 50px;
}
.fontw {
/*设置字体粗细*/
font-weight: 700;
}
.fonts {
/*设置文体样式*/
font-style: italic;
}
.all {
/*直接复合设置*/
font: italic 700 20px "Microsoft YaHei";
}
</style>
</head>
<body>
<p class="fontf">设置雅黑字体</p>
<p class="size">设置字体大小</p>
<p class="fontw">设置字体粗细</p>
<p class="fonts">设置斜体字体</p>
<p class="all">综合设置标准字体</p>
<p>标准字体</p>
</body>
4. CSS文本属性——颜色、对齐、装饰、缩进、行间距
- 文本颜色
color，使用颜色名称red，十六进制#FF0000，RGBrgb(200,0,0)设置 - 对齐
text-align，只能设置左中右对齐，left right center，默认左 - 装饰
text-decoration，设置上划线overline，下划线underline，删除线line-through，空none - 缩进
text-indent，设置首行缩进，设置像素px或者当前字符大小em，一般设置2em - 行间距离
line-height，设置行高，行间距= 文字高度(默认16) + 上间距+ 下间距。所以行间距 = （行高-文字高度）/2
<head>
<title>CSS</title>
<style>
.color {
/*设置颜色 一般使用十六进制*/
color: rgb(220, 100, 100);
}
.alli {
/*设置文本对齐 默认左*/
text-align: center;
}
.decro1 {
/*设置装饰 取消所有装饰使用none*/
text-decoration: underline;
}
.decro2 {
text-decoration: overline;
}
.decro3 {
text-decoration: line-through;
}
.indent {
/*首行缩进 一般集合<p>使用*/
/*2em 指当前的两个字符大小*/
text-indent: 2em;
}
.lineh {
/*行高 = 文字高度(默认16px)+上间距+下间距组成*/
line-height: 46px;
/*此时，上间距=下间距 = (46-16)/2 =15px */
}
</style>
</head>
<body>
<div class="colr">设置文本颜色</div>
<div class="alli">设置文本对齐</div>
<div class="decro1">设置文本装饰 下划线</div>
<div class="lineh">设置文本行间距</div>
<div class="decro2">设置文本装饰 上划线</div>
<div class="decro3">设置文本装饰 删除线</div>
<div class="indent">设置文本首行缩进两个字符</div>
</body>
5. CSS引入方式
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）
5.1 内部样式表
写入了HTML内部，存入<style>内，上述所有代码书写方式，理论上可以放在所有位置。
控制范围： 所有页面
优点： 代码结构清晰
缺点： 结构与样式没有完全分离
5.2 行内样式表
在元素标签<p>，<div>等内部进行书写<style>样式表，适合修改简单样式。
注意：style后接双引号，在双引号内部补充键值对
<div style="color: red; font-size: 30px;">行内样式表</div>
5.3 外部样式表
适合样式比较多，最广使用
单独建立CSS文件，引入HTML使用
- 新建CSS文件
- 引入
在HTML中使用<link>标签，引入CSS文件
在<head>中引入，注意<link rel="stylesheet" href="css文件路径">
6. Emmet语法
快速生成HTML/CSS
6.1 HTML快速生成
- 生成标签，
标签名->tab，如div->tab - 多次生成标签，
标签名*数量->tab，如div*10->tab - 生成父子标签，
父标签名>子标签名->tab，如ul>li->tab - 生成兄弟标签，
标签名+标签名->tab，如div+p->tab - 生成带有类名标签，
标签名.类名->tab，如div.class1->tab - 生成带有id的标签，
标签名.#id名->tab，如p.#ID->tab - 生成多类别的标签，
标签名.类名$*数字->tab，如div.demo$*5->tab，生成class=demo1到demo5的div。 - 初始化文字的标签，
标签{初始化}，如div{初始化div}
6.2 CSS快速生成
首字母生成属性
如：ta–>text-aligh
h300–>height: 300px
7. 符合选择器
7.1 后代选择器（※）
也称包含选择器，可以选择父元素里面的后代元素，父元素中所有的后代元素
父标签 子标签如ol li
子标签嵌套子标签也可以
<head>
<style>
div li {
color: red;
}
</style>
</head>
<body>
<div>
<ol>
<li>ol中的li</li><!--红-->
<li>ol中的li</li><!--红-->
</ol>
<div>
<ol>
<li>ol中的li</li><!--红-->
<li>ol中的li</li><!--红-->
</ol>
</div>
</div>
<ul>
<li>ul中的li</li>
<li>ul中的li</li>
</ul>
</body>
7.2 子选择器（※）
必须选择某元素最近一级选择器 （直接后代）
父元素>直接子元素，如：ol>li
代码略
7.3 并集选择器（※）
选择多组标签，同时为他们定义相同的样式，集体声明
标签1, 标签2, 标签3, ...{ CSS处理 }
如：div, ol li , p { CSS处理 }
内部的标签可以任意选择。
一般竖着写，保存自动改正
7.4 伪类选择器
为某些选择器添加其他效果，例如：鼠标放在链接上变色。用冒号 :表示
7.4.1 链接<a>伪类选择器
- a.link 选择所有未被访问的链接
- a.visited 选择所有已被访问的链接
- a.hover 选择鼠标指针位置的链接
- a.active 选择活动链接（鼠标按下未弹起）
- 开发中一般
<a>写一个，a:hover补充一个即可 - 需要关注的一点，有没有访问过的关键，在于点击后会查找浏览器历史记录，所以一旦你之前访问过某个网页，如Baidu，且设置为
<a>的ref，那你的CSS显示直接就是访问过的样式。在我这里就是red
<head>
<style>
/*未被访问过的链接*/
a:link {
color: gray;
text-decoration: none;
font-size: 25px;
}
/*已经被访问过的链接*/
a:visited {
color: red;
}
/*鼠标接触的链接*/
a:hover {
color: blue;
}
/*鼠标按下，未弹起的链接*/
a:active {
color: green;
}
</style>
</head>
<body>
<a href="https://www.fake1.com" target="_blank">未被访问的链接</a>
<a href="https://www.fake1.com" target="_blank">已经被访问过的链接</a>
<a href="https://www.fake1.com" target="_blank">鼠标接触过的链接</a>
<a href="https://www.fake1.com" target="_blank">鼠标按下未弹起的链接</a>
</body>
7.4.2 focus伪类选择器
选取获得光标的的<input>表单元素。如：
input:focus选取出光标选定的input表单
<head>
<style>
input:focus {
/*选取出光标选定的input表单*/
background-color: skyblue;
color: red;
}
</style>
</head>
<body>
<span><input type="text"></span>
<span><input type="text"></span>
<span><input type="text"></span>
</body>
仅供个人学习所用
4293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
