CSS 常用属性

最新推荐文章于 2023-06-02 15:05:55 发布

solicucu

最新推荐文章于 2023-06-02 15:05:55 发布

阅读量247

点赞数

分类专栏：前后端文章标签： css

本文链接：https://blog.csdn.net/weixin_42973678/article/details/105313519

版权

前后端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

solicucu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 常用属性

CSS 小笔记有事没事可以逛一逛在html 引入外部css 文件, head 标签写上<head><link rel = “stylesheet” type = “text/css” href = “x.css”></head>CSS 常用属性：.classname { box: width: 100px; // 设置宽度 height:...
复制链接

扫一扫