CSS 小笔记
有事没事可以逛一逛
在html 引入外部css 文件, head 标签写上
<head>
<link rel = “stylesheet” type = “text/css” href = “x.css”>
</head>
CSS 常用属性:
.classname {
box:
width: 100px; // 设置宽度
height: 100px; // 设置高度
position: absolute
left: 10px;
top: 5px; // position 结合top left 或者top right 任意连个来定位, absolute 是相对浏览器左上角来说(left, top)组合,
position: relative // 相对上一个元素来说
position:fixed // 固定位置,跟absolute 差不多
float: left, right // 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另 一个浮动框的边框为止.
padding-top:10px; 上内边距宽度 padding-(right, bottom, left)
padding: 10px 10px 10px 10px 上右下左
margin: 10px 10px 10px 10px 上右下左 跟padding 相似,外边距
border:
border-width: 5px // 设置边界宽
border-color: #FFFFFF // 设置边界颜色
border-style: solid // 设置边界类型(实现 虚线) style 默认是none, 所以要设置其 他类型,才可以正常显示width
border-top-color: #0000FF // 设置上边界颜色
border-*-*: * // 上面三种都可以特别指定上下左右
border: 5px solid red; // 合三为一, width style color
border-radius: 20px / 15 px ; // 可以理解为分别表示椭圆的长半轴和短半轴,相同 则为⚪
backgroud:
backgroud-color: #123456 // 设置背景颜色
background-image: url(image_path) // 设置背景图片,默认背景重复平铺
background-repeat: no-repeat; // 设置背景不重复
background-size: auto // 默认值,重复平铺
: contain // 同样是平铺效果
: cover // 用一张图片覆盖整个布局
background-attachment: fixed; // 保持背景固定,不随滚动条滚动
: local // 默认属性,跟随滚动
background-clip: content-box // 只在内容上有背景,padding 这些没有
image:
opacity: 0.4 // 设置图片透明度
height: 100 px // 设置图像高度 (auto)自适应
text:
font-size: 40px; // 设置字体大小
font-family: 微软雅黑 // 设置字体类型
font-style: italic // 斜体 oblique(微斜)
font-weight: 500; // 字体粗细,越大越粗
color: #aabbcc; // 设置文本颜色
text-align:left; // 文本左对齐,还有(right, center 等)
direction:ltr; // 从左到右
letter-spacing: 10px; // 字母间间距
word-spacing: 5px; // 单词间间距
line-height: 10px; // 设置文本行高
text-indent: 50px; // 段落首行缩进
text-decoration: underline; // 画上下划线(overline(上划线), line-through(中间))
text-shadow: 10px 10px 1px red; // 生成阴影,水平方向,垂直方向,模糊程度(可 省略不模糊) 颜色
dynamic:
transition-delay: 1s; // 可以结合hover 动作,变换,这里是延迟1s变化,单位也 可以是ms
transition-duration: 500ms // 设置变换的实长,越短变化越快
transition-property: width // 指定宽立刻变化,
transition-timing-function: linear // 时间线性变化
list:
list-style-type: none; // 去掉列表的点或字母
}
选择器类型:
选择器:
任意选择器: * { }
元素选择器: a {} // 对所有a标签都起作用
类选择器: .classname {} 以点开头,不同标签可以有相同类名,作用于所有类名为classname 的标签
id 选择器: #idname {} 以 # 开头,id名一般都是唯一的
属性选择器: [href]{ } 中括号包括属性名,作用域所有写有 href 属性的标签
href = “value”如果指定值,那么只作用于有相同属性值的标签。
冒号选择器:a:hover { style} 表示某个动作,这里是经过上方后
元素内嵌样式( < p style = “”> < /p > ) > 文档内嵌入样式(head 的 < style></ style>) > 外部样式(引入的css文件)
浮动属性的理解
CSS 迷之神奇的问题
<head>
<meta charset="UTF-8">
<title>{% block title %}默认标题{% endblock %}</title>
{# <link rel="stylesheet" href="../static/css/base.css">#}
<!-- <link rel="stylesheet" href="../static/css/base.css"> -->
</head>
在html里面写 Ctrl + / 注释就是上面那种 {# #},但是并没有注释的效果。。。
这种注释其实是针对 python 的模板语法
正确注释方式是下面那个 <! – -->
但是如果在css 文件里面 注释一行 Ctrl + / 那么是
/*background-image: url("../images/tree.jpg");*/
# url() 里面的东西其实可以不用双引号
这种效果,这个是真的注释
另外: 引用static 里面的文件(引用css文件,用的是相对当前文件的路径),用项目相对路径也不行,例如:/static/images/tree.jpg 。
图片背景设置问题(Django)
目录结构,红框是同级目录
目标:
想在templates/base.html 引用 statics 下的base.css, 其中base.css 设置了base.html 的body的背景图片如下:
根据reid下配置的路由,通过/reid/home/ 来请求base.html 页面。
结果图片总是加载不出来,而且也表示找不到base.css 文件
只能够另辟蹊径,采取读取静态文件方式
方法1
1、 配置静态文件路径
在settings.py 文件下添加static下所有文件夹的路径
# 添加静态文件路径,可以直接访问
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static\images'),
os.path.join(BASE_DIR, 'static\css')
]
这样之后,可以通过 /static/xx.jpg 直接访问图片了,直接写第一级目录就行,系统会自动查找
2、调用静态文件
有两种方式:
硬编码:
直接/static/name 访问
<img src="/static/scatter.jpg"> <!--硬编码-->
软编码:
<!-- 在html顶部加上这句话-->
{% load staticfiles %}
<!-- 获取css文件-->
<link rel="stylesheet" href="{% static 'base.css' %}">
<!-- 获取图片文件 -->
<style>
body {
background-image: url("{% static 'scatter.jpg'%}");
}
</style>
or
<body style="background-image: url('{% static 'scatter.jpg' %}')">
可以通过上面这种方式 加上关键子 static 文件名, 就可以获取对应的文件
问题: 由于css 不能写这种{% %} 模板语法,所以只能把 background-image: 放到html里面的< style> < / style> 来写,或者放到 body 标签里面也可以。
所以感觉这种方式,有点麻烦,不能吧background-image: 直接放到css一起写。
方法2:
除了上面的采用静态文件方式,另一种解决办法如下
1、新建目录
新建一个目录命名为media, 这个名字不重要,反正不是static就行(试过了就行不行)
把要访问的css 或者 jpg文件都放里面,可以有多级目录
我这里只有一张图片
2、配置文件
在settings.py 文件加上
# 配置media的相对路径,在html访问是直接用这个开头
MEDIA_URL = '/media/'
# 前端通过 /media/image.jpg 访问时,后端会进行转换读取真实路径
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
注意,MEDIA_ROOT:其实不一定是项目目录下的路径,如果存储在电脑的其他位置,用上绝对路径就行,但要保证访问的资源在该路径下。
同时前端访问资源还是以/media/ 相对路径的方式来访问。
3、配置路由
在全局urls.py 下加上
urlpatterns += static(MEDIA_URL, document_root=MEDIA_ROOT)
4、访问资源
<img src="/media/tree.jpg">
# 这里是直接以/media/ 开头
最后,我发现其实不一定要命名为media,什么都行,唯独static不行,感觉static就是一个专用的目录。
CSS 父级透明度opacity 影响子级元素透明的问题
在css 里面,如果父级 div 设置了透明度为opacity:0.5,那么里面所有的元素,都会被透明化,就算图片也是。
但是,如果子元素想设置自己的透明度,或者设置不透明,发现opacity 就算设置为1,也是没有变化,主要是受父级影响。
解决办法:
把 父级的opacity:0.5 改成下面的形式:
background: rgba(255,255,255,0.5) # 前面三个值是颜色,最后是透明度,这样设置之后,只会作用于背景,里面的内容就不会透明化
同样子级元素根据所需,设置自己需要的rgba