CSS学习笔记(十) 样式覆盖规则
有的时候 CSS 真的十分调皮，明明我们给一个元素指定了样式，但是在页面上却没有一点改变
这时我们就要考虑是不是别处指定的样式覆盖了当前指定的样式呢？
所以了解一下样式覆盖规则还是十分有必要的，对于一个元素的某个属性而言，表现出来的样式会遵循以下的规则
（1）内联样式 > 内部样式表 / 外部样式表
<!DOCTYPE HTML ...
CSS学习笔记
CSS学习笔记
由于web自动化测试中，会用到比较复杂的定位方式：CSS定位，这种定位方式比较简洁，定位速度较快，所以继续学习前端的CSS知识，总结下学习笔记，以便后续查看。同时，也希望能帮助到大家。
学习网址：http://www.w3school.com.cn/css/css_intro.asp
CSS 指 ...
前端学习（十四）：CSS布局
进击のpython
*****
前端学习——CSS布局
每个模块的相关央视就算是进本上都完成了，但是，这些模块想放在不同的位置
横着放，竖着放，斜着放... ... 想怎么放怎么放
那就用到了今天要说的CSS布局了
浮动
浮动介绍
浮动是网页布局中非常重要的一个属性。那么浮动这个属性一开始设计的初衷是为了网页的文字环绕效果，如图 ...
前端学习（十三）：CSS盒子模型
进击のpython
*****
前端学习——CSS盒子模型
在前面的时候也说过，包括分析网页结构的时候，提到了，网页就其实就是一个一个盒子叠起来的
那现在就是有装饰的盒子，难度就变得深刻
所以说为了能够让你更好地理解，在说盒子模型之前，我要先向你介绍一下标签
对！就是html里面的那些标签
标签分类
在CSS中，html中的标签 ...
前端学习（十二）：CSS排版
进击のpython
*****
前端学习——CSS排版
本节主要介绍网页排版中主要格式化元素属性
帮助开发者把css技术与网页排版紧密联系到一起，来更好的实现网页设计效果
字体属性
字体
在日常工作中，我们会用到word来编写内容，比如可以对我们需要设置的内容设置字体、字号、颜色等设置
那么我们在网页中使用css样式时，同样也能 ...
前端学习：学习笔记（CSS部分）
前端学习：学习笔记（CSS部分）
CSS的学习总结(图解）
CSS的引入方式和书写规范
CSS的插入方式_内嵌样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 插入CSS代码的第1种方式: 内嵌形式 -->
<div style="hei ...
前端学习（十）：CSS选择器
进击のpython
*****
前端学习——CSS选择器
每一条CSS样式声明由两部分组成：
选择器{
样式；
}
在CSS中{}之前的部分就是”选择器”,”选择器”指明了{}中的”样式“的作用对象
也就是说该”样式“作用与网页中的哪些元素
那选择器就分为：基础选择器和高级选择器
基础选择器
标签选择器
标签选择器顾名思义就是html代 ...
前端学习（九）：CSS基础
进击のpython
*****
前端学习——CSS基础
CSS的样式可以写在哪呢？其实CSS的样式插入式十分灵活的
按照插入的形势来看，可以分为三种情况
而接下来就对这三种情况进行简单的讨论
内嵌式
CSS样式表是可以直接把代码放在现有的标签里面去的
这种方法就称为内嵌式：
<p style='color:red;'>文字颜色为红色</p>
把对应的styl ...
前端学习（八）：CSS
进击のpython
*****
前端学习——CSS
现在的互联网前端分为三层：
HTML:超文本标记语言。从语义的角度描述页面结构
CSS:层叠样式表。从审美的角度负责页面样式
JS:Javascript。从交互的角度描述页面的行为
所以说HTML，CSS，JS也被称为前端三剑客
CSS是一个很神奇的东西，设计者可以通过修改样式表的定义从而使我们的网 ...
CSS学习笔记(九) 居中方案
在 CSS 中，居中对齐是我们常常需要用到的布局方式，下面介绍一些常用的居中方法
1、文字居中
（1）文字水平居中
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 500px;
height: 300px;
border: 1px solid black;
text-align: center; /* 设置文字居中对齐 */
}
</ ...
CSS学习笔记(八) 弹性布局
关于弹性布局的教程，网上已经有很多很多写得比较详细的，所以这里就不再细说啦
这篇文章将会把常用的属性整理出来，就当作是一个速查手册吧，方便以后使用
1、基本概念
设置 display: flex; 的元素称为 Flex 容器，其中所有的子元素称为 Flex 项目
容器存在两根用于定位的轴，分别是水平的 主轴 和垂直的 交叉轴，项目 ...
CSS学习笔记(七) 粘性布局
粘性布局是什么呢？我们先来看看效果演示
没错，其实就是在页面滚动的时候保持元素（这里的是标题）在页面视图上方，也就是我们常常看到的 吸附效果
这样的效果究竟是如何实现的呢？很简单，只要使用 position: sticky 即可，一份简单的示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<style>
.header {
...
CSS学习笔记(六) 定位
1、定位模式
首先，我们先来看看 CSS 中三种定位模式的一些基本特点【重要】，它们分别是绝对定位、相对定位和浮动定位
相对定位
相对定位的元素出现在正常文档流中
通过设置垂直或水平位置，可以让元素相对于起点进行移动
无论是否进行移动，元素仍然占据原来的空间
因为相对定位的元素占据原来的空间，所以移动元素可能 ...
CSS学习笔记
层叠样式表（Cascading Style Sheets，CSS）用于为 HTML 元素 指定样式，从而使得内容与表现分离
CSS 系列文章整理如下，有不足之处还请多多指正：
CSS学习笔记(一) 基本介绍
CSS学习笔记(二) 选择器
CSS学习笔记(三) 样式声明
CSS学习笔记(四) 框模型
CSS学习笔记(五) 过渡与动画
CSS学习笔记(六) 定位
CSS学习笔记(七) ...
css学习
伪类：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
input:focus{
background: #0E5C2F;
}
</style>
</head>
<body>
<!--
伪类选择器
：link -表示普通的链接（就是没有访问过的链接）
...
八、Django学习：使用css美化页面
按照一般的网站设计，导航栏、内容栏、尾注。本次对主页使用css进行美化。
增加路由blog urls.py
from django.url import path
from . import views
urlpatterns = [
path('', views.blog_list, name='blog_list'),
path('<int:blog_pk>', views.blog_detail, name='blog_detail'),
path('type/<int:blog_ ...
CSS 学习手册
精心整理了之前的css学习笔记，仅供学习参考使用，禁止商业用途
目录CSS 简介1.CSS 简介CSS 概述层叠次序2.CSS 基础语法CSS 语法值的不同写法和单位记得写引号多重声明：空格和大小写3.CSS 高级语法选择器的分组继承及其问题友善地对待Netscape 4继承是一个诅咒吗？4.CSS 派生选择器派生选择器5.CSS id 选择器id 选择器id ...
CSS学习
12:09:45 2019-08-07
开始了解CSS
00:02:59 2019-08-08
中间从5点到11点不在 回来学了一个小时
10:39:46 2019-08-08
继续学习
16:44:10 2019-08-08
css入门成功
本文资料来源：慕课网 https://www.imooc.com/learn/9/
前面写过CSS和Html之间的关系 CSS是对Html的美化
CSS全称为“层叠样式表 (C ...
CSS flex 布局学习笔记
写在前面
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item）。
容器默认存在两根轴：水平的主轴（main axis）和 ...
CSS每日学习笔记（3）
8.1.2019
1.CSS伪类：用于向某些选择器添加特殊的效果。
伪类的语法：
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
2. first-child 伪类可以用来选择元素的第一个子元素。
提示：最常见的 ...
