CSS控制段落首字突显-笔记-零分杂记-收集建站知识，分享网络资源

CSS控制段落首字突显

零分 2,509 2023-02-04 21:40

CSS控制每段第一个字的样式：

*{margin:0;padding:0;}
p{width:150px;color:#000;font-size:1em;}
p:first-letter{font-size:2.5em;padding-right:5px; text-transform:uppercase;}/*段落第一个字母样式 :first-letter  ,另外text-transform:uppercase; 是将英文字母转换成大写格式输出 */
/* :first-letter样式中还可以使用行内元素的vertical-align属性，以控制同行内容的对齐方式,字体比较小时能派上用场！*/
p:first-line{ color:#f00;} /* 段落第一行样式 :first-line */

以上就是控制每个段落首字首行的CSS样式

效果：

标签：CSS，CSS样式，段落首字

php file 与 file_get_contents函数《流浪地球2》曝元宵海报主创分享太空电梯创作

网站设置开灯（亮模式/白天）和关灯（暗模式/黑夜）效果

在很早之前，这个效果叫做开灯/关灯，现在叫做白天/黑夜，曾经有那么一段时间没有看到过这种效果，现在又很多网站/APP都喜欢这种切换白天/黑夜模式。实现效果：设置2套或者多套色调模板，和之前的那种换皮肤大差不差。所以博客新主题也设置了这么一个效果，样式布局基本没怎么改变，后台设置页升级了一下，很多东西都不再“写死”，可以自由设置！白天模式效果：黑夜模式效果：感觉黑夜的色调比较好看。总体涉及到的原理： 1、设计2套或者多套CSS样式，可以在body里添加一个class，后面保留class/ID样式名称不变，在不同的样式里给设计一个区域，通过body里的class名调用不同的样式CSS。

笔记 2,420 5个月前

Tab手风琴弹出菜单遇到的问题，diaplay：block与JQ slideToggle 冲突，显示多次效果

在设计手风琴Tab展开收起菜单时，遇到了一个问题，第一次点击时，总是出现多次效果。 display:block，元素可见 slideToggle，当display:block可见时，显示JQ动画效果slideup，当display:none，不可见时，显示效果slideDown，因为还要设计右边显示展开收起的图标（“+”可以展开，“-”，可收起），默认需要显示第一个菜单展开的效果。所以需要给一个CSS active，当已经展开时添加active，收起时移除active。因为初次加载时需要展开第一个，所以第一个的初始值有active。第一次使用时，贪图方便，就把display:block的

笔记 1,876 7个月前

CSS并排，左边不抢空间，右边固定大小

CSS并排布局： flex，position，float，最近很少用float，感觉总是控制不好它。最好用的布局，flex，右边设置好一个固定宽度，左边使用grow:1，或者width:calc(100% - 固定宽度)。另外一种就是position，父层设置 position:relative，padding-right：右边的固定宽度，左边设置width：100%，右边设置position:absolute，固定在右边。现在习惯用flex，flex，并排的两个层会自动自适应高度

笔记 1,590 8个月前

CSS中的变量VAR()函数，CSS中var()的使用

var() 函数用于插入 CSS 变量的值。CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。 var() 函数的语法 var(name, value) name：必需。变量名（以两条破折号开头）。value：可选。回退值（在未找到变量时使用）。注释：变量名称必须以两个破折号（–）开头，且区分大小写！ var() 如何工作首先：CSS 变量可以有全局或局部作用域。全局变量可以在整个文档中进行

笔记 1,714 8个月前

H1的CSS样式解决占用一行的问题

H1标签的作用-网站建设，H1标签是在网站制作过程中，经常用到的一个标签，他的作用仅次于Title，在seo方面，这个标签还有H2,H3，这些标签用好了，对网站的优化会有事半功倍的效果。 H标签都是占用一行的。有时候，我们又不像让H标签占用一行！可以用CSS来限制 CSS：display:inline; width:auto; 对应的效果：

笔记 2,487 1年前

零分杂记