原文地址:CSS顏色相關(guān)總結(jié)Introduction
總結(jié)CSS中顏色的使用方法,達(dá)到需要的效果。
RequirementCopy your pex3.html file (from your previous practice exercise) into a file named pex4.html. Alternatively, your pex4.html file may be a revised /improved version of pex3.html, and/or also you could also add/eliminate content. You should keep in your file at least one image with figure caption and at least one table (with the contents as before).
You should style this file with CSS, by creating an external CSS file (name it stylePex4.css), and then linking the CSS file from the HTML file. (Place the style file in the same folder as the html file; the linking from the HTML file should be RELATIVE.) Include comments in both of your files, at the top of the file, indicating the name of the other file (thus indicating the connection between these two files), your name and date.
Include at least one CSS rule (and corresponding HTML elements and/or attributes as needed in the HTML file) , so that the styling effects are visible in:
Several or all instances of the same element in the whole document (for example, several paragraphs)
To make this styling visible you may use different colors for text or for background, you may style borders in different ways and/or style text in different sizes or other visible font variations.
Include at least one CSS rule (and corresponding HTML elements and/or attributes as needed in the HTML file) , so that you use a different kind of selector than the previous item, and the styling effects are visible in:
One unique element
Include at least one CSS rule (and corresponding HTML elements and/or attributes as needed in the HTML file) , so that you use a different kind of selector than the previous two items, the selector is some kind of descendant selector, and the styling effect is visible in one or more html elements
Subdivide your HTML contents in at least three different areas . The areas may coincide with sections but not necessarily. You may use the
One of the three different backgrounds (as described in the previous item) should include an image. The image should be placed in the images subfolder and LINKED RELATIVELY from the css file. Take into account the various examples provided in the W3Schools Background property tutorials. NOTE: Make sure that the looks of your page is minimally reasonable. For example, images that are in figures (which you should have in your html file as required at the top of this exercise) should not conflict/overlap with images in the background. The background should be such that the contents are easy to read. You may also incorporate margins, but margins are NOT required for this practice exercise. Create a section (consider the element ) titled with a heading "Here we play with fonts" (or something to that avail). In that section, include at least three paragraphs. Each paragraph should have different font styling. Change several font properties. (Check W3 schools for fonts)
Create a section titled "Numeric systems and Color Codes". In this section include the following list (and the table (or list) described in the next item) The first list will include the following two equalities: 1010010110110 (2 = ? (16 7CDAF5(16 = ?(2 NOTE: You need to do the conversion by calculating the mysterious numbers in the bases indicated, and display the correct value. Subscripts should be rendered in the webpage as such.
Next (in the same section "Numeric systems and Color Codes"), include a table/list with three (3) color names, with the corresponding code in hexadecimal, in binary, and as rgb. You should color each element in the list with that color. The following is an example, but you should use OTHER COLORS Red FF 00 00 1111 1111 0000 0000 0000 0000 rgb(255,0,0) Dark Green 00 64 00 0000 0000 0110 0100 0000 0000 rgb(0,100,0) BlueViolet 8A 2B E2 1000 1010 0010 1011 1110 0010 rgb(138,43,226)
Choose one of the colors from the list in the previous item and define a new color by adding or reducing some amount of red. Include a new row/item in the table/list with this new color, and name it with the original color name and then +red (or -red depending on whether you added or reduced red). The following is an example, you should create another color: Dark Green + red EE 64 00 1110 1110 0110 0100 0000 0000 rgb(238,100,0) In a footer include your information, including your name with a copyright symbol, and the reference to the sources of all pictures you use in your page. NOTE: Incorporate pictures that are free to use or your own pictures; you do not have to pay to use pictures for this course. Validate both your HTML and your CSS files. Clear both errors and warnings. You will need to upload several files into the server: the HTML, CSS and any pictures that you use. Upload images in the images subfolder. Similarly to the previous practice exercises, you should provide, in Canvas, the URL to access, in this case, only one file: pex4.html. The other files are linked from the pex4.html file, therefore you should not include URL"s to access them in Canvas. (本文出自csprojectedu.com,轉(zhuǎn)載請(qǐng)注明出處) 文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/116315.html
摘要:整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí)原文協(xié)作規(guī)范中文技術(shù)文檔協(xié)作規(guī)范阮一峰編程風(fēng)格凹凸實(shí)驗(yàn)室前端代碼規(guī)范風(fēng)格指南這一次,徹底弄懂執(zhí)行機(jī)制一次弄懂徹底解決此類(lèi)面試問(wèn)題瀏覽器與的事件循環(huán)有何區(qū)別筆試題事件循環(huán)機(jī)制異步編程理解的異步 better-learning 整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí) 原文:https://www.ahwgs.cn/youxiuwenzhan...
摘要:是因?yàn)閯?dòng)畫(huà)的結(jié)束后的最后一幀的顏色為,立馬會(huì)重新執(zhí)行動(dòng)畫(huà),顏色會(huì)初始到第一幀,所以會(huì)有明顯的變化。的效果就是背景顏色被剪裁到文字上面,只有文字會(huì)顯示背景顏色。用數(shù)字表達(dá)結(jié)合以上三個(gè)屬性結(jié)合動(dòng)畫(huà),最終實(shí)現(xiàn)文字漸變的效果。 瀏覽 Animate.css官網(wǎng) 的時(shí)候發(fā)現(xiàn)Animate.css這幾個(gè)字母的顏色會(huì)慢慢變化,個(gè)人覺(jué)得還是很有意思,本以為是利用animate 改變color,結(jié)果F1...
摘要:通過(guò)該屬性可以控制繪制的區(qū)域。背景圖片相關(guān)的屬性背景圖片本身是有自身尺寸的,被應(yīng)用元素也有自己的尺寸。通過(guò)屬性可以修改原點(diǎn)位置。坐標(biāo)系的反方向都是重復(fù)方式繪制。該位置是相對(duì)于原點(diǎn)構(gòu)建的坐標(biāo)系,默認(rèn)情況下該位置就是在原點(diǎn)。 一、元素背景是指哪些區(qū)域 默認(rèn)情況下元素的背景是指元素border(包含border)以?xún)?nèi)的區(qū)域。 showImg(https://segmentfault.com/...
摘要:原文地址本篇文章是筆者的設(shè)計(jì)指南學(xué)習(xí)筆記的第二部分,由于最近都在準(zhǔn)備期末考的事,所以都沒(méi)來(lái)得及對(duì)設(shè)計(jì)指南進(jìn)行一些總結(jié),沒(méi)有看之前第一部分的話也可以從這里傳送過(guò)去。 原文地址:http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是筆者的 《CSS 設(shè)計(jì)指南》 學(xué)習(xí)筆記的第二部分,由于最近都在準(zhǔn)備期末考的事,所以都沒(méi)來(lái)得及對(duì) ...
摘要:另外一種實(shí)現(xiàn)思路是添加四個(gè)來(lái)分別實(shí)現(xiàn)上下左右的邊框效果,雖然可行,但是要添加四個(gè)額外元素,有點(diǎn)兒得不償失的感覺(jué)。背景 這幾天工作中遇到一個(gè)交互需求,要求實(shí)現(xiàn)一個(gè)效果,當(dāng)鼠標(biāo)移入一個(gè)元素的時(shí)候,元素出現(xiàn)一個(gè)動(dòng)態(tài)的邊框,如圖: showImg(https://user-gold-cdn.xitu.io/2019/5/15/16aba8a2ccb58e4e);動(dòng)態(tài)邊框 思路 看到這個(gè)效果,我首先想...
閱讀 1076·2021-10-14 09:42
閱讀 1368·2021-09-22 15:11
閱讀 3285·2019-08-30 15:56
閱讀 1243·2019-08-30 15:55
閱讀 3612·2019-08-30 15:55
閱讀 889·2019-08-30 15:44
閱讀 2027·2019-08-29 17:17
閱讀 2070·2019-08-29 15:37